我想动态创建一个列表并使其可排序。
我的第一次尝试不包括动态加载列表数据。我在这里找到了一个基本的例子:
http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/
当“列表”选择元素更改时,我检索选择的整数值以检索与所选列表关联的任务。
这是我到目前为止所拥有的。在Firebug中,列表在加载后正确结构化。我认为问题是我在getJSON调用中创建列表后尝试使列表“可排序”。
我尝试在JSON调用中移动“//将我们的listdiv ul作为可排序和填充”代码,但仍然在select onChange事件中。
显示列表但不可排序。没有错误。困惑。 :0
$(document).ready(function(){
// our global buildlist var
var buildlist;
$('#lists').change(function(){
var selected = $("#lists option:selected");
var listval = selected.val();
buildlist = "<ul>";
$.getJSON('getlist.php?cid='+listval, function(data) {
for(var i =0;i<data.length;i++)
{
var item = data[i];
// alert(item.id+","+item.cid+","+item.task+","+item.position);
buildlist = buildlist + "<li id='listtasks_"+item.id+"'>"+item.task+"</li>";
}
buildlist = buildlist + "</ul>";
$("#listdiv").html(buildlist);
}); // end getJSON
// set our listdiv ul as sortable and stuff
$("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){
var order = $(this).sortable("serialize") + '&action=update';
$.post("updatelist.php", order, function(){
});
}
});
}); // end of change lists select box
}); // end doc ready
这是加载列表后的html
<div id="listdiv">
<ul>
<li id="listtasks_1">this is item 1</li>
<li id="listtasks_2">this is item 2</li>
<li id="listtasks_3">this is item 3</li>
<li id="listtasks_4">this is item 4</li>
<li id="listtasks_5">this is itme 5 </li>
</ul>
</div>
答案 0 :(得分:0)
在获取成功函数中,您需要在构建列表后实例化sortable
。现在你在实际构建HTML之前就已经这样做了,所以没有对象可以进行排序。
答案 1 :(得分:0)
它应放在您的getJSON
回调中。我知道你说你已经尝试过了,但至少你的代码肯定是错误的。一旦更改,它对我有用:Demo。
如果这确实无法解决您的问题,问题必定在其他地方。我们可能需要查看更多代码。