朋友們。
我正在使用jQuery UI，簡單的ol > Li操作，有可拖動和可下降的選項。
我有兩個li專案，類別和子類別。
我的目的是允許用戶將多個新的類別和子類別拖到退出的串列中。
我能夠在檔案重繪 時將多個類別和子類別添加到現有串列中。然而，除非重繪 頁面，否則新添加的 li 類別不接受子類別。
<ol class="list"/span>>
<li class="category"/span>> a</li>
<li class="category"/span>> b</li>
<li class="category"/span>> c
<ol>
<li class="subcategory"/span>> c1</li>
<li class="subcategory"/span>> c2</li>
</ol>/span>
</li>/span>
</ol>
我可以添加新的category和subcategory。但是，假設我添加了新的category d，我想給它添加一個subcategory。唯一可行的方法是，我保存狀態并重繪 頁面。
我希望用戶能夠建立他們想要的整個串列，并在最后保存，而不必在中間多次重繪 頁面。
對于類別，我想我已經很接近了，但是不能讓它注冊為可移動物件。
如果有任何幫助，我們將不勝感激。
。drop: function(event, ui) {
$('.list').append(ui.draggable. clone(true).detach（）。 addClass('ui-droppable ui-state-highlight').removeClass('ui-draggable ui-draggable-handle') ）。)
}
Jsfiddle https://jsfiddle.net/ozzie6935/8mch0r1k/6/
謝謝你
uj5u.com熱心網友回復：
從你的帖子中，我不清楚你想達到什么目的。
我把這個例子放在一起，也許可以幫助你。
。$(function() {
$(".list .subcategory").draggable() 。
$(".list").droppable({})。
drop: function(event, ui) {
var newItem = ui.draggable.clone（）。
ui.draggable.remove()。
串列
.addClass("ui-state-highlight"/span>)
.removeClass('ui-draggable ui-draggable-handle' )
.attr("style", " ")。
$('.list').append（newItem）。
}
});
});.list .category,
.list .subcategory {
width: 150px;
padding: 0.25em;
}< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<ol class="list">/span>
<li class="category"/span>> a</li>
<li class="category"/span>> b</li>
<li class="category"> c
<ol>
<li class="subcategory"/span>> c1</li>
<li class="subcategory"/span>> c2</li>
</ol>/span>
</li>/span>
</ol>/span>Update
請看。https://jsfiddle.net/Twisty/b28utk0r/8/
JavaScript
$(function(/span>) {
function makeParentDrop（target） {
$(target).droppable({
tolerance: 'pointer',
accept: "#draggable li.child",
drop: function(event, ui) {
alert("drop, do something ...") 。
}
});
}
$('#draggable li.parent, #draggable li.child').draggable({
cancel: "a.ui-icon"/span>,
revert: "invalid",
helper: "clone",
游標。"move"。
});
$('#droppable'/span>).droppable({
tolerance: 'pointer',
accept: "#draggable li.parent",
drop: function(event, ui) {
console.log(ui.draggable.clone() ）。)
var newItem = ui.draggable.clone(true) 。 detach().addClass（'ui-droppable ui-droppable-active ui-state-highlight'）。
$('.list').append（newItem）。
makeParentDrop（newItem）。
}
});
makeParentDrop('#droppable li.parent') 。
});
由于新專案沒有被初始化為Droppable元素，你必須初始化它們。我已經添加了一個函式來幫助做到這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/319911.html
標籤：