jQueryUI：在拖放时，将div附加到其可拖放目标

我不熟悉jQuery和jQuery UI。我正在尝试将一个div从父div移动到另一个div。到目前为止，我的文章是拖拉的。当文章在上面移动时，可放下的股票可以正确地识别它，但我似乎找不到如何将这篇文章附加到股票上

我想我正在处理一个封装在jQuery对象中的div，但我在这里有点迷茫

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

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

然后我有一个脚本，用于将文章添加到stock div，并将其从shelf 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>

我做错了吗？

---

谢谢，

用户界面本身包含事件参数。要执行所需的操作，您需要执行以下操作：

<script>

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

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

---

Update是对特定元素的引用。

ui本身包含事件参数。要执行所需的操作，您需要执行以下操作：

<script>

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

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

---

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

我认为您应该尝试嵌套可排序插件。我认为您应该尝试嵌套可排序插件。谢谢。考虑到我有多个应用了.article类的div，如何将此代码仅应用于要删除的div？我已根据您的需要更新了代码。将ui参数用于特定引用。答案很好-但是您已经通过其id对删除目标进行了硬编码。当然有一种方法可以根据事件动态识别删除目标，这将使您的答案更易于重用？谢谢，谢谢你。考虑到我有多个应用了.article类的div，如何将此代码仅应用于要删除的div？我已根据您的需要更新了代码。将ui参数用于特定引用。答案很好-但是您已经通过其id对删除目标进行了硬编码。当然有一种方法可以根据事件动态识别删除目标，这将使您的答案更易于重用？谢谢