jquery - jQuery UI：在放置时，将 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是对特定元素的引用。