我使用jQuery UI可拖放和可排序的功能,我是新的.
我有左边的项目列表(从数据库生成),我有右边的框,用户可以拖放它们.
当/之后,用户可以对它们进行排序.
我有左边的项目列表(从数据库生成),我有右边的框,用户可以拖放它们.
当/之后,用户可以对它们进行排序.
这是完整的预览:http://jsbin.com/oBeXiko/3
问题:在排序后如何获取每个框中的元素ID数组?
我试过.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",ui){ ui.draggable.remove(); } }); $( ".raspored,.predmet,.cas,#kanta,#lista_predMeta" ).disableSelection(); });