[英]How do I dynamically manipulate the content of a jquery draggable UL element?
我动态地设置的,我的我的innerHTML <ul>
通过使用document.getElementById("myUL").innerHTML="<li...>
我动态创建的<li>
不能被jquery拖动。 静态HTML但是。
如何使使用innerHTML指令创建的新创建的动态HTML可拖动?
这是一些代码:
function onAddTask() {
var task = document.getElementById("task").value;
for (i = 0; i < MAX_TASKS; i++) {
if (tasks[i] == null) {
tasks[i] = task;
break;
}
}
/* construct HTML */
var html = "<li class='ui-widget-content ui-corner-tr'>" +
"<h5 class='ui-widget-header'>New Task</h5>" +
"<a href='' onclick='return onCreateTask();'><img src='graphics/newtask.png' width='96' height='72'/></a>" +
"<center>Create a new task</center>" +
"</li>";
for (i = 0; i < MAX_TASKS; i++) {
if (tasks[i] != null) {
html += "<li class='ui-widget-content ui-corner-tr ui-draggable' style='width: 96px; display: list-item;'><h5 class='ui-widget-hea
+ "<img src=graphics/task.png width=96 height=72>"
+ tasks[i]+"</li>";
}
}
var todoList = document.getElementById("todo");
todoList.innerHTML = html;
tb_remove();
return false;
}
然后在HTML中
<body>
<ul id="todo" class="todo ui-helper-reset ui-helper-clearfix">
<li class='ui-widget-content ui-corner-tr ui-draggable' style='width: 96px; display: list-item;'><h5 class='ui-widget-header'>blah</h5>
<img src=graphics/task.png width=96 height=72>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">New Task</h5>
<a href="" onclick='return onCreateTask();'><img src="graphics/newtask.png" width="96" height="72"/></a>
<center>Create a new task</center>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Task</h5>
<img src="graphics/task.png" width="96" height="72" />
<center>Task Data</center>
</li>
</ul>
在您的onAddTask()
函数中,在tb_remove();
行之前添加以下行tb_remove();
$("#todo li").draggable({
helper : 'clone'
});
我假设已包含所有必需的jquery + UI库。 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.