我在一个 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 标签:
<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>
最佳答案
我的猜测是您需要编辑 ui.draggable 元素。
有点像
var item = $(ui.draggable).data('test', 1);
$(this).append(item);
在drop函数中。这会将数据附加到元素。您也可以将其包装在您手动创建的 div 中以将元素附加到该 div 中。
var item = $('<div data-test="foo">').append(ui.draggable);
$(this).append(item);
关于javascript - 拖放后向可拖放项目添加标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47029636/