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();
});

这会阻止 mousedown 事件冒泡，因此它会在单击图标(li 中的 a 元素)时抑制可拖动行为。

但是，这不是一个好的解决方案!它将事件处理程序添加到 a 元素本身，因此它只会将处理程序添加到当您调用 on 时存在的元素。如果您添加一个新元素(我使用了 ADD 按钮，幸运的是它已经实现)，修复不适用。您必须将处理程序添加到添加的任何新元素。

---

我们可以用更好的方法来做到这一点。我们可以改为向容器添加处理程序:

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

on 的第二个参数让我们指定一个过滤器。 #gallery 和 #trash 元素可以接收从子元素冒出的 mousedown 事件，但我们只希望在事件发起时执行此处理程序来自 .ui-icon。这非常好，我们只需设置一次事件处理程序，并且每个可排序容器只有一个，因此更容易、更高效。

---

我决定检查 API documentation ，并发现有一个特定的选项可以处理这个问题:

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

它非常清楚地告诉 sortable 小部件如果它是从 .ui-icon 开始的则不允许排序!您可以将此选项添加到可排序对象的初始化中，而不是显式调用 sortable("option")。