I dynamically set my innerHTML of my <ul>
by using document.getElementById("myUL").innerHTML="<li...>
The <li>
I create dynamically is not draggable by jquery. The static HTML however is.
How do I make the newly created dynamic HTML created using innerHTML directive to be draggable?
Here is some code:
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;
}
And then in the HTML I have
<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>
In your onAddTask()
function, add following lines just before line tb_remove();
$("#todo li").draggable({
helper : 'clone'
});
I have assumed that all required jquery+UI libraries are included. Hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.