0

jquery sortable でソート可能にされた画像のリストがあります。並べ替えのために画像をドラッグアンドドロップできます。現在、すべての画像の親アンカーには、ライト ボックス イベントのクリック イベントも関連付けられています。

そのため、ユーザーが画像をクリックすると、ライトボックスで開かれます。また、画像を別の場所にドラッグ アンド ドロップすることもできます。

イベント バブリング: 画像をドラッグしようとすると、クリック イベントがトリガーされます。私は期待していません。画像のドラッグ中にクリックイベントを無効にするにはどうすればよいですか?

HTML コード:

<div class="shop-photos">
<div id="shop-photos">
<ul class="ui-sortable">

    <li class="photo-frame media-placeholder media-9108" id="mediaid-9108">
    <a class="preload" data-media-id="9108" href="http://usauto.vo.llnwd.net/o37/dev/07/95/0795f614c4e4d7704e54cc6e48d7ce2c0c16c91b13566015990874.jpg"><img id="9108" data-media-id="9108" src="/shop_portal/api_get_uploaded_photo/?mediaid=9108"></a>
    </li>

    <li class="photo-frame media-placeholder media-9082" id="mediaid-9082">
    <a class="preload" data-media-id="9082" href="http://usauto.vo.llnwd.net/o37/dev/4d/f5/4df5db9819ff891deb60e9c5d85315ccbed41d9413565853192746.jpg"><img id="9082" data-media-id="9082" src="/shop_portal/api_get_uploaded_photo/?mediaid=9082"></a>
    </li>

    <li class="photo-frame media-placeholder media-9089" id="mediaid-9089">
    <a class="preload" data-media-id="9089" href="http://usauto.vo.llnwd.net/o37/dev/9b/24/9b248b3c1308cf3f57f4220ec2aea2c0e954592113565988843784.jpg"><img id="9089" data-media-id="9089" src="/shop_portal/api_get_uploaded_photo/?mediaid=9089"></a>
    </li>

    <li class="photo-frame media-placeholder media-9391" id="mediaid-9391">
    <a class="preload" data-media-id="9391" href="http://usauto.vo.llnwd.net/o37/dev/69/ed/69ed3eac6bfd4af09256e54ed3e5d2d4d4f9948a13572811600895.jpg"><img id="9391" data-media-id="9391" src="/shop_portal/api_get_uploaded_photo/?mediaid=9391"></a>
    </li>

</ul> 
</div>
</div>

以下のコードでこれを行いました。

$('#shop-photos a').lightBox({overlayBgColor: '#111', overlayOpacity: 0.6, containerResizeSpeed: 150});

     $("#shop-photos ul").sortable({
             start: function(event, ui) {
              ui.item.find("a").unbind("click");
             },
             stop: function(event, ui) {            
               $("#shop-photos a").bind("click");
               },
             opacity: 0.6, 
             cursor: 'move', 
             update: function() {           
                var order = $(this).sortable("serialize"); 
                var arr_mediaid = order.split('&');
                for(var i=0;i<arr_mediaid.length;i++){
                    arr_mediaid[i] = arr_mediaid[i].replace("mediaid[]=", ""); 
                }
                $("input[id=sorted-photos]").val(arr_mediaid);
            }   
        })

アンカーのクリック イベントを適切に削除しました。ただし、画像のドラッグを行った後は元に戻せません。

私の質問は、数回ソートした後、クリックイベントが表示されないことです。バインド解除イベントは適切にトリガーされていますか? 適切な場所でバインドを解除しましたか?

4

2 に答える 2

2

jQuery の最新バージョンを使用している場合は、使用する必要が.onあり、.off bind は非推奨です。

バインドを解除する代わりに

ui.item.find("a").off("click");

縛る代わりに

$("#shop-photos a").on("click");

または、タグの手段でクリックイベントを無効にする場合

$("#shop-photos a").click(function() { return false; });
于 2013-01-25T06:36:22.967 に答える
1

.bind() メソッドは 2 つの変数を取ります。イベント、「クリック」と機能。$("#shop-photos a").bind('click'); とだけ言うことはできません。

$("#shop-photos a").bind('click',[some function]); と言う必要があります。その[何らかの機能]がライトボックスのトリガーになります。

画像のサムネイルの外で、ドラッグ用に別のアイコンを使用することをお勧めします。UI を分離します。1 つはドラッグ用、もう 1 つはズーム用です。

それ以外の場合は、ドラッグが完了した後で、ライトボックスを開く関数をアンカーに再バインドします。わかる？

于 2013-01-25T05:53:57.847 に答える