3

動的に作成された要素で jQuery UI のソート可能なメソッドを使用すると、Javascript で問題が発生します。画像にカーソルを合わせると、サムネイル内のカーソルに追従する画像の大きなバージョンが表示されます。次に、画像を並べ替え/ドラッグすると、サムネイルから離れた位置に設定された大きな画像が表示されます。並べ替え時に大きな画像を非表示にする必要があります:-)

私が何を意味するかを簡単に理解できるように、スクリーンを作成しました: http://screenr.com/jjv8

イベントを接続するための私のコード:

// Selected photos hover
$('ul li img').live('mouseenter', function () {
    var img = $(this);
    var imgDiv = $(this).parent().find('.hover-image');
    img.mousemove(function (e) {
        imgDiv.show();
        var x = e.pageX;
        var y = e.pageY - 50;
        imgDiv.css({ "top": y + "px", "left": x + "px" });
    });
});

$('ul li img').live('mouseleave', function () {
    $(this).parent().find('.hover-image').fadeOut('fast');
});

そして、ソートのための私のコード:

selectedPhotosList.sortable({
    handle: '.selected-thumbnail-image',
    start: function (event, ui) {
        ui.item.find('.selected-thumbnail-image').die('mouseenter');
        ui.item.find('.hover-image').hide();
    }
});

はい、.live()これは古いバージョンの jQuery を使用する Umbraco CMS に存在するデータ型であるため、使用しているため、.on()動作しません :-)

これを機能させる方法についてヒントを得た人はいますか?

編集

私はバグを見つけました：

私の.live('mouseenter', function()中では…imgDiv.show();カーソルが動くたびに呼び出しています。

このようにするとうまくいきます：

// Selected photos hover
$('ul li img').live('mouseenter', function () {
    var img = $(this);
    var imgDiv = $(this).parent().find('.hover-image');
    imgDiv.show();
     img.mousemove(function (e) {
         var x = e.pageX;
         var y = e.pageY - 50;
         imgDiv.css({ "top": y + "px", "left": x + "px" });
     });
});

$('ul li img').live('mouseleave', function () {
    $(this).parent().find('.hover-image').fadeOut('fast');
});

ただし、これにより IE を使用すると別のバグが発生します。: Screenr: http://screenr.com/1Iv8

ホバー画像は、実際に mousemove 関数をトリガーする前に一度表示されます:-/ これを覆す方法はありますか?

4

3 に答える 3

1

私はお勧めします：

$('ul li img').off('mouseenter');

于 2012-09-05T08:49:37.230 に答える
0

少し醜いですが、IE7 +、Chrome、およびFirefoxで機能するこれに対する解決策を見つけました（それが控えめな表現であるかどうかはわかりません;-)）：

並べ替え可能な開始イベントで、ホバー画像のコピーを作成して変数に保存し、DOM から削除します。次に、停止イベントで、ドラッグ/ソートされたリスト項目に追加します。コード：

var tempHoverImage = "";
selectedPhotosList.sortable({
    handle: '.selected-thumbnail-image',
    start: function (event, ui) {
        var hoverImage = ui.item.find('.hover-image');
        tempHoverImage = hoverImage;
        hoverImage.remove();
    },
    stop: function (event, ui) {
        ui.item.prepend(tempHoverImage);
    }
});
于 2012-09-05T10:35:36.347 に答える
0

.die() はうまくいくはずです。そのドキュメントを読む

$('ul li img').die('mouseenter');

そのようなものがうまくいくはずです。

于 2012-09-05T08:47:42.747 に答える