jQuery UI:在放下时，将div附加到其可放下的目标 [英] jQuery UI: On drop, attach the div to its droppable target

问题描述

我是jQuery和jQuery UI的新手.我正在尝试将div从父div移到另一个div.到目前为止，我的文章"是可拖动的.当商品在其上方移动时，可掉落"的库存正确地标识了该商品，但我似乎找不到如何将该商品附加到库存上的信息.

I'm new to jQuery and jQuery UI. I'm trying to move a div from a parent div to another. So far, My "article" is draggable. The "droppable" stock properly identifies the article as it's move above it, but I can't seem to find how to attach this article to the stock .

我想我正在操纵封装在jQuery对象中的div"，但是我在这里有点迷失了.

I think I'm manipulating a "div encapsulating in a jQuery object", but I'm a bit lost here.

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

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

然后我有一个脚本，用于将商品添加到股票div，并将其从货架div中删除:

Then I have a script that's meant to add the article to the stock div, and remove it from the 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>

我做错了吗? 谢谢，

推荐答案

ui本身包含事件参数.您需要执行的操作来执行所需的操作:

The ui itself contains event arguments. What you need to do to perform the action you want is:

<script>

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

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

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

Update ui.draggable is the reference to the specific element.

这篇关于jQuery UI:在放下时，将div附加到其可放下的目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！