我的 html 容器如下所示,它有多个级别。
<div id='levels'>
<div id="level6" class="container">
<div class="content">
<ul id="6" class="levelBucket">
</ul>
</div>
</div>
<div id="level5" class="container">
<div class="content">
<ul id="5" class="levelBucket">
</ul>
</div>
</div>
</div>
当页面加载时,我从 DB 中获取所需的元素,并使用下面的 HTML 附加到相关的 UL。
<li class='dataWrapper' >
<div>content..</div>
</li>
当所有 LI 元素就位后,我使用以下 java 脚本使字段可拖动和可放置。
function AddDraggableDropperbleFunctionality() {
var selectedClass = 'areaSelected';
$('.levelBucket li').draggable({
revert: true,
start: function (e, ui) {
ui.helper.addClass(selectedClass);
},
stop: function (e, ui) {},
drag: function (e, ui) {}
});
$(".levelBucket").sortable().droppable({
over: function (e, ui) { $(this).addClass(selectedClass); },
out: function (e, ui) { $(this).removeClass(selectedClass); },
drop: function (e, ui) {
//Do all the updates
}
});
}
页面加载后,所有 Draggable 和 Droppable 功能都可以正常工作。我的页面中有一个单独的按钮可以动态添加 LI 元素。当我添加新元素时,我再次调用上述 Java 脚本方法以使新添加的项目可拖动。但实际上发生的是新添加的 LI 在可拖动和可放置的情况下运行良好,并且所有现有的 LI 不再可放置。