1

リスト要素がアイコンによってドラッグされないようにするのに苦労しています。

各 li にはアイコンがあり、クリックすると削除または別のリストに追加されます。ただし、アイコンをドラッグすると、アイテムが削除または追加されます。

Li をドラッグできるようにしたいのですが、Li でアイコンをドラッグできないようにします。

デモがあります: http://jsfiddle.net/w3vvL/27/

私は成功しなかった多くのことを試しましたが、それを理解することはできません: -

    $( "#gallery li" ).draggable({
          cancel: "a.ui-icon",
          revert: "invalid",
          containment: "document",
          helper: "clone",
          cursor: "move"
        });
    $( ".ui-icon" ).disableSelection();

    //Get Dropped Item
    $("#trash").droppable({
         drop: function(event, ui) {
    $(ui.draggable).stop();

               }
    });

どんな助けでも大歓迎です！

4

1 に答える 1

0

あなたのjsfiddleに、私は以下を追加しました：

$('.delete, .add').on('mousedown', function(e) {
    e.stopPropagation();
});

これにより、mousedownイベントがバブリングするのを防ぐため、アイコン（a内の要素li）がクリックされたときのドラッグ可能な動作が禁止されます。

ただし、これは良い解決策ではありません。要素自体にイベントハンドラーを追加するaため、を呼び出したときに存在する要素にのみハンドラーを追加しますon。新しいアイテムを追加した場合（私は[追加]ボタンを使用しましたが、幸いにも実装されました）、修正は適用されません。追加された新しいアイテムには、ハンドラーを追加する必要があります。

私たちはそれをより良い方法で行うことができます。代わりに、コンテナーにハンドラーを追加できます。

$('#gallery, #trash').on('mousedown', '.ui-icon', function(e) {
    e.stopPropagation();
});

の2番目の引数ではon、フィルターを指定できます。#galleryand要素は、子要素からバブリングするイベント#trashを受け取ることができますが、イベントが。から発生した場合にのみ、このハンドラーを実行する必要があります。これは非常に優れています。イベントハンドラーを設定する必要があるのは1回だけで、並べ替え可能なコンテナーごとに1つしかないため、より簡単で効率的です。mousedown.ui-icon

APIドキュメントを確認することにしましたが、これに対処するための特定のオプションがあることがわかりました。

$("#gallery, #trash").sortable("option", "cancel", ".ui-icon");

これは、ウィジェットが！sortableから開始された場合に並べ替えを許可しないように非常に明確に指示します。.ui-iconsortable（ "option"）を明示的に呼び出す代わりに、このオプションをsortableの初期化に追加できます。

于 2013-03-22T00:44:55.307 に答える