拖放后向可拖放项目添加标签
Posted
技术标签:
【中文标题】拖放后向可拖放项目添加标签【英文标题】：Adding tags to draggable and droppable items after drop 【发布时间】：2018-04-12 06:45:51 【问题描述】：我在一个 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>
【问题讨论】：
请向我们展示所有相关代码以及您尝试过的内容 我添加了一些代码sn-ps 您不应包含代码的图片。使用 Code 函数我猜你需要编辑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);
【讨论】：
第二个 sn-p 对我来说工作得很好。谢谢你的帮助:) 没问题，很高兴它有帮助:)以上是关于拖放后向可拖放项目添加标签的主要内容，如果未能解决你的问题，请参考以下文章