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。如果您添加一个新项目（我使用了 ADD 按钮，幸运的是它已实现），则修复不适用。您必须将处理程序添加到添加的任何新项目中。

我们可以做得更好。我们可以向容器添加一个处理程序：

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

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

我决定检查API 文档，发现有一个特定的选项可以解决这个问题：

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

如果它sortable是从.ui-icon! 您可以将此选项添加到可排序的初始化中，而不是显式调用 sortable("option")。

于 2013-03-22T00:44:55.307 回答