如何動態操縱可拖動的UL元素的內容？

Question

我動態地設置的，我的我的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>

Answer 1

在您的onAddTask()函數中，在tb_remove();行之前添加以下行tb_remove();

$("#todo li").draggable({
   helper : 'clone'
});

我假設已包含所有必需的jquery + UI庫。 希望能幫助到你。

如何動態操縱可拖動的UL元素的內容？

問題描述

1 個解決方案

解決方案1
1 已采納 2012-07-27 08:24:45

如何動態操縱可拖動的UL元素的內容？

問題描述

1 個解決方案

解決方案1 1 已采納 2012-07-27 08:24:45

解決方案1
1 已采納 2012-07-27 08:24:45