如何使用JQuery使用可拖动和可放置的插入和附加?

Question

我正在尝试构建一个引导编辑器。我有一个<li>菜单，其中包含所谓的引导类或工具，等等。添加新部分<li>和添加某些工具<li>是有区别的。添加我使用插入的部分，并添加我使用追加的工具。此处的部分是"当前"或"新"。

杰奎里

<script>
$(function () {
$(".draggable").draggable({
helper: "clone",
end: function (e, ui) {
const Holded_ItemID = ui.draggable.attr("id");
if (Holded_ItemID == 'Sec') {
$("li").removeClass("NewSection"); 
$(ui.helper).addClass("NewSection");
}
}
});
$("#droppable").droppable({
drop: function (e, ui) {
const Holded_ItemID = ui.draggable.attr("id");
if (Holded_ItemID == 'Sec') {
//to insert new section after current section
$(this).children().last().insertAfter($(ui.draggable).clone());
}
else
{
//to add elemnt inside the new section
$('.NewSection').append($(ui.draggable).clone());
};
}
});
});
</script>

.HTML

<ul>
<li id="Sec" class="draggable">add new section</li>
<li class="draggable ui-widget-content">add new grid</li>
<li class="draggable ui-widget-content">add new button</li>
<li class="draggable ui-widget-content">add new Image</li>
<li class="draggable ui-widget-content">add new card</li>
<li class="draggable ui-widget-content">add new media objects</li>
</ul>
<div class="droppable ui-widget-header">
<p>Area Of web design</p>
</div>

.CSS

<style>
.draggable { width: 170px; height: 20px; border:1px dotted black; padding: 1px 1px 1px 10px; margin:3px; }
.droppable { width: 500px; height: 300px; padding: 0.5em; float: left; margin: 10px; padding:10px; background-color:antiquewhite; }
</style>

简单地说，我无法将 li 菜单中的任何内容添加到可放置区域。为什么，我的代码有什么问题？

Answer 1

几点说明：

• 对于draggable({})，您必须使用 stop() 事件而不是end。
• 我使用ui.helper来访问拖动的元素。
• 而不是$(this).children().last().insertAfter我只使用附加，不知道你为什么使用它，所以你可能想修改我的更改。

我想这就是你想要的，

$(function () {
$(".draggable").draggable({
helper: "clone",
stop: function (e, ui) {
//console.log(ui.helper[0]);
const Holded_ItemID = $(ui.helper[0]).attr("id");
if (Holded_ItemID == 'Sec') {
$("li").removeClass("NewSection"); 
$(ui.helper[0]).addClass("NewSection");
}
}
});
$("#droppable").droppable({
drop: function (e, ui) {
const Holded_ItemID = $(ui.draggable[0]).attr("id");
if (Holded_ItemID == 'Sec') {
//to insert new section after current section
$("#droppable").append(ui.draggable[0])
//$(this).children().last().insertAfter($(ui.draggable).clone());
} else {
//to add elemnt inside the new section
$("#droppable").append($(ui.draggable[0]).clone());
};
}
});
});

.draggable { width: 170px; height: 20px; border:1px dotted black; padding: 1px 1px 1px 10px; margin:3px; }
.droppable { width: 500px; height: 300px; padding: 0.5em; float: left; margin: 10px; padding:10px; background-color:antiquewhite; }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul>
<li id="Sec" class="draggable">add new section</li>
<li class="draggable ui-widget-content">add new grid</li>
<li class="draggable ui-widget-content">add new button</li>
<li class="draggable ui-widget-content">add new Image</li>
<li class="draggable ui-widget-content">add new card</li>
<li class="draggable ui-widget-content">add new media objects</li>
</ul>
<div id="droppable" class="droppable ui-widget-header">
<p>Area Of web design</p>
</div>