Question

我在尝试禁用列表元素被图标拖动时遇到了困难。

每个li都有一个图标，当点击时删除或将其添加到另一个列表中。但是，如果您按其图标拖动，则会移除或添加该项目。

我希望能够将li拖动，但阻止图标在li上被拖动。

我尝试了许多没有成功的事情，我无法弄清楚： -

    $( "#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事件冒泡，因此当点击图标（a中的li元素）时，它会禁止可拖动的行为。

然而，这不是一个好的解决方案！它将事件处理程序添加到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”）。

在可排序列表中拖动jQueryUI禁用/取消图标？

1 个答案: