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的初始化中。