jQuery UI : On drop, 将 div 附加到其可放置目标

Question

我是 jQuery 和 jQuery UI 的新手。我正在尝试将 div 从父 div 移动到另一个。到目前为止，我的“文章”是可拖动的。当文章在其上方移动时，“可放置”库存可以正确识别该文章，但我似乎找不到如何将这篇文章附加到库存上。

我想我正在操作一个“封装在 jQuery 对象中的 div”，但我在这里有点迷失了。

<div id="shelf" class="shelf">
    <div class="article">article</div>
</div>

<div id="stock" class="stock">
</div>

然后我有一个脚本，旨在将文章添加到 stock div，并将其从货架 div 中删除:

<script>

    $('.article').draggable();

    var stockArea = $('#stock').droppable();

    stockArea.bind( "drop", function(event, ui) {

        if ($(this).find(".article")){
            console.log('appending ' + ui);
            $(this).append(ui);
        }
    });
</script>

我这样做错了吗？ 谢谢，

Answer 1

ui 本身包含事件参数。要执行您想要的操作，您需要做的是:

<script>

    $('.article').draggable();

    var stockArea = $('#stock').droppable({
        drop: function (event, ui) {
            var target = $(event.target);
            $(ui.draggable).appendTo(target).remove();
        }
    });
</script>

更新 ui.draggable是对特定元素的引用。