Я использую jQuery UI draggable и sortable functions, и я новичок в этом. У меня есть список элементов слева (сгенерированный из базы данных), и у меня есть поля справа, где пользователь может перетаскивать их. В то время как/после удаления пользователь может их сортировать.
Вот полный предварительный просмотр: http://jsbin.com/oBeXiko/3
Проблема: как я могу получить массив идентификаторов элементов в каждом поле после сортировки?
Я попытался использовать .sortable( "toArray" ) и sortable ( "serialize" ), но оба возвращают пустую строку.
Простой HTML
<div id="raspored">
<div class="left">
<ul id="kanta">Delete</ul>
<ul id="lista_predmeta" class="droptrue">
<li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
<li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
<li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
<li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
</ul>
</div>
<div class="right">
<ul class="raspored" razred="1">I</ul>
<ul class="raspored" razred="2">II</ul>
<ul class="raspored" razred="3">III</ul>
<ul class="raspored" razred="4">IV</ul>
</div>
</div>
Мои функции jQuery
$(document).ready(function() {
var url = "";
var raz = 0;
$( ".raspored" ).sortable({
cursor: 'move',
opacity: 0.65,
stop: function ( event, ui){
var data = $(this).sortable('toArray');
console.log(data); // This should print array of IDs, but returns empty string/array
}
});
$(".raspored").droppable({
accept: ".predmet",
drop: function(event, ui){
ui.draggable.removeClass("predmet");
ui.draggable.addClass("cas");
raz = $(this).attr("razred");
}
});
$(".predmet").draggable({
connectToSortable:".raspored",
helper: "clone",
revert: "invalid",
stop: function(event, ui){
var predmet = $(this).attr("predmet-id") ;
console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
}
});
$("#kanta").droppable({
accept: ".cas",
drop: function(event, ui){
ui.draggable.remove();
}
});
$( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
});