我正在嘗試構建一個 Bootstrap 編輯器。我有一個<li>所謂的 Bootstrap 類或工具的菜單，等等。<li>添加新部分和<li>添加一些工具之間是有區(qū)別的。要添加一個部分，我使用 insert after 并添加工具，我使用append。這里的部分是“當前”或“新”。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>超文本標記語言 <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 菜單中的任何內容添加到可放置區(qū)域中。為什么，我的代碼有什么問題？
1 回答
慕姐8265434
TA貢獻1813條經(jīng)驗 獲得超2個贊
幾點注意事項：
因為
draggable({})你必須使用stop()事件而不是end。我曾經(jīng)
ui.helper訪問拖動的元素。而不是
$(this).children().last().insertAfter我只使用附加，不知道你為什么使用它，所以你可能想根據(jù)需要修改我的更改。
我想這就是你想要的
$(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>
- 1 回答
- 0 關注
- 106 瀏覽
添加回答
舉報
0/150
提交
取消