Я хочу захватить элементы из списков и перетащить их в другие пустые списки.jQuery UI Сортируемые и перемещающиеся элементы между списками
Это HTML структура:.
<div class="structure">
<div id="row1" class="connected"></div>
<div id="row2" class="connected">
<div class="item">Item 1</div>
</div>
<div id="row3" class="connected"></div>
<div id="row4" class="connected">
<div class="item">Item 2a</div>
<div class="item">Item 2b</div>
<div class="item">Item 2c</div>
</div>
<div id="row5" class="connected"></div>
<div id="row6" class="connected">
<div class="item">Item 3a</div>
<div class="item">Item 3b</div>
</div>
<div id="row7" class="connected"></div>
</div>
Есть пустые <ul>
где вы можете поместить любой элемент После этого он создает новый пустой <ul>
до и после того, как перетащить другие элементы в.
Это мой Javascript
$(function() {
$(".structure div").sortable({
placeholder: "ui-state-highlight",
connectWith: ".connected",
items: "> div",
receive: function (event, ui) {
var targetRowID = $(this).attr("id");
var itemsTargetRow = $("#"+ targetRowID +" .item").length;
if(itemsTargetRow == 1) {
function uniqueID() {
return Math.random().toString(36).substr(2, 5);
};
$("#"+ targetRowID)
.before('<div id="row'+ uniqueID() +'" class="connected"></div>')
.after('<div id="row'+ uniqueID() +'" class="connected"></div>');
}
},
stop: function (event, ui) {
var fromRow = $(this).attr("id");
var isRowEmpty = $("#"+ fromRow +" .item").length;
if(isRowEmpty == 0)
{
$("#"+ fromRow).next().remove();
$("#"+ fromRow).remove();
}
}
}).disableSelection();
});
Проблема:
Когда я упал элемент в пустом списке, я не могу перетащить этот элемент нигде больше.
Любые идеи?
Большое спасибо , Это заставило меня решить мою проблему. – Deen