jQueryUI禁用/取消圖標被拖動到可排序列表中嗎？

Question

我在嘗試禁止列表元素被圖標拖動時遇到困難。

每個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();

               }
    });

任何幫助將不勝感激！

Answer 1

在您的jsfiddle中，我添加了以下內容：

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

這將停止向上冒泡鼠標按下事件，所以它抑制了可拖動的行為，所述圖標（一個當a內部元件li被點擊）。

但是，這不是一個好的解決方案！ 它增加了事件處理程序的a元素本身，所以它只會增加處理程序，當你調用它存在的元素on 。 如果您添加一個新項目（幸運的是，我使用了ADD按鈕，則已實現），此修復方法不適用 。 您必須將處理程序添加到添加的任何新項目中。

---

我們可以做一個更好的方法。 我們可以向容器添加處理程序：

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

on的第二個參數讓我們指定一個過濾器。 #gallery和#trash元素可以接收從子元素#trash mousedown事件，但是我們僅希望該處理程序在事件源自.ui-icon 。 這非常好，我們只需設置一次事件處理程序，並且每個可排序的容器只有一個，因此它更簡單，更有效。

---

我決定查看API文檔 ，並發現有一個特定的選項可以解決此問題：

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

如果它是從.ui-icon開始的，它很清楚地告訴sortable小部件不允許排序！ 除了可以顯式調用sortable（“ option”）之外，您可以將此選項添加到您的sortables的初始化中。