拖放后向可拖放项目添加标签

Question

我在一个 div 中有一个无序列表，当我将任何这些列表项拖放到另一个 div 元素时，我想实现这一点，我想要一个新的 div 将在旧的 div 中创建，其中包含此列表项，以便我可以在这些新的 div 中添加新标签。我正在使用 JQuery 可拖放小部件。我该怎么做？

这是我的脚本：

<script type="text/javascript">
    $(document).ready(function(){
        $('#source li').draggable({
            helper: 'clone',
            revert: 'invalid'
        });
        $('#divCountries').droppable({
            accept : 'li[data-value="country"]',
            drop : function(event, ui){
                $(this).append(ui.draggable);
                return '<div>' + $(this).text() + '</div>'
            },
        });
        $('#divCities').droppable({
            accept : 'li[data-value="city"]',
            drop : function(event, ui){
                $(this).append(ui.draggable);
                return '<div>' + $(this).text() + '</div>'
            },
        });
    });
</script>

这是我的正文标签：

<body style="font-family: Arial">
<form id="form1" runat="server">
    <div class="divClass">
        Countries & Cities
        <ul id="source">
            <li data-value="country">USA</li>
            <li data-value="country">Germany</li>
            <li data-value="country">UK</li>
            <li data-value="city">New York</li>
            <li data-value="city">Berlin</li>
            <li data-value="city">London</li>
        </ul>
    </div>
    <div class="divClass" id="divCountries">
        Countries

    </div>
    <div class="divClass" id="divCities">
        Cities

    </div>
</form>

Answer 1

我猜您需要编辑 ui.draggable 元素。

类似于

var item = $(ui.draggable).data('test', 1);
$(this).append(item);

在 drop 函数中。这会将数据附加到元素。您也可以将其包装在您手动创建的 div 中以将元素附加到它。

var item = $('<div data-test="foo">').append(ui.draggable); 
$(this).append(item);

拖放后向可拖放项目添加标签

Adding tags to draggable and droppable items after drop

javascript

jquery

jquery-ui

droppable

draggable