我正在尝试构建Bootstrap编辑器。我有一个假定的Bootstrap类或工具的<li>
菜单,无论如何。 <li>
添加一个新部分与<li>
添加一些工具之间是有区别的。在我后面添加插入部分,并在我添加后面添加工具。这里的部分是“当前”或“新”。
JQuery
<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菜单中添加任何内容到可放置区域。为什么,我的代码有什么问题?
一些注意事项:
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>