将可拖动对象添加到可排序对象后对其进行编辑答案

【问题标题】：Editing draggable after it's added to a sortable将可拖动对象添加到可排序对象后对其进行编辑
【发布时间】：2010-01-05 02:13:35
【问题描述】：

嘿，我正在尝试找出我需要绑定到什么事件以及我需要使用什么属性来获取对已删除项目的 DOM 元素的引用（即接收列表中的项目。

这是我目前所拥有的......

<ul id="toolbox">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
    $('#existing').sortable({
        revert: true
    });
    $('#toolbox li').draggable({
        connectToSortable: '#existing',
        helper: 'clone',
        revert: 'invalid',
    });
</script>

我的目标是，例如，一旦将 A 放入#existing ul 中，就将其变成其他东西（其他任何东西都足够了 - 真正的实现要复杂得多。我只需要掌握那个 DOM 元素） .

我已尝试将以下内容作为我的 sortable 的接收：

function receive(ev, ui)
{
    $(this).append('<b>this</b>');
    ui.sender.append('<b>sender</b>');
    ui.item.append('<b>item</b>');
}

但这似乎是#existing UL，sender和item都是被拖到工具箱中的li。我正在寻找的是#existing 中新创建的li。是否有财产或其他事件可以为我提供我所追求的东西？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable draggable

【解决方案1】：

我最近遇到了同样的问题。我用以下方法解决了它：

$('#existing').droppable({
    drop: function(e, ui) {
        // ui.draggable is the node that gets created in #existing
        // ui.draggable[0].originDragger is the node that was 
        // dragged from #toolbox
    }
}).sortable({
    revert: true
});

【讨论】：

嘿，谢谢你的信息，我没有意识到你可以在 sortable 上堆叠一个 droppable 来获取额外的事件。我最终采取了不同的策略，在源上放置了一个 CSS 类，一旦它移动我就可以检测并删除它，但这是一个更清晰的答案，如果我有时间，我可能会考虑实现它。
嗨，贾斯汀，这是一个有趣的组合，但在我的例子中，“drop”被调用了两次——我认为既是为了放入可排序，又是为了放入可排序本身。你有同样的经历吗？您可以在这个简单的示例中看到这一点：jsfiddle.net/NPC42/8JVrp/4

【解决方案2】：

我没有尝试过这两种方法，但从理论上讲，它们似乎可以工作。首先，如果您将ul#existing 也设置为droppable，您可以对drop 事件执行某些操作，例如从该li 获取您需要的信息，例如text()，从DOM 中删除该对象并生成一个新元素。

Orrr，你可以在你的可拖动对象的stop 事件上做一些事情，比如检查元素父母现在是否是ul#existing。希望这会有所帮助。

【讨论】：

【解决方案3】：

不要绑定到sortreceive，而是像这样绑定到sortout

$("#sortable").bind('sortout', function(event, ui) {
 console.log(ui.item);
});

或

$("#sortable").sortable({ //during initialization
  out:function(event, ui) {
     console.log(ui.item);
   }
 });

在这种情况下，ui.item 将是您要查找的元素

【讨论】：

SortOut 是当某些东西离开可排序的时候。我假设您的意思是将它绑定到另一个可排序的，但在这种情况下，另一侧只是一个可拖动的（并且故意不是可排序的）所以这不起作用。不过还是谢谢。