Question

我在一个div中有一个无序列表，当我将这些列表项中的任何一个拖放到另一个div元素中时，我希望实现这一点，我想在一个旧的div中创建一个新的div，里面有这个列表项，这样我就可以在这些新的div中添加新标签。我正在使用JQuery draggable和droppable小部件。我怎么能这样做？

这是我的剧本：

<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);

删除

1 个答案: