Question

我是jQuery和jQuery UI的新手。我正试图将div从父div移到另一个div。到目前为止，我的“文章”是可以拖延的。 “droppable”库存可以正确识别文章，因为它在它上面移动，但我似乎无法找到如何将这篇文章附加到库存中。

我认为我正在操纵“封装在jQuery对象中的div”，但我在这里有点迷失。

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

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

然后我有一个脚本，意味着将文章添加到股票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是对特定元素的引用。

jQuery UI：在删除时，将div附加到其可放置目标

1 个答案: