拖放动态生成的html元素答案

【问题标题】：Drag and drop dynamically generated html element拖放动态生成的html元素
【发布时间】：2011-11-01 11:23:57
【问题描述】：

我需要为我的 Web 应用程序添加拖放功能。 jquery-ui 成为我这样做的首选。我已经阅读了 jQuery-ui 网站上的教程并开始编程。如果我在这个文件中使用静态元素，这个函数可以正常工作。但是当我使用 ajax 从数据库生成元素时，这些元素不能拖放。我在下面粘贴我的代码：

<ul id="employee">
<li>
<h5>33333333</h5>
<img src='images/employee.png' width='96' height='96' />
</li>

<li>
<h5>33333333</h5>
<img src='images/employee.png' width='96' height='96' />
</li>

<li>
<h5>33333333</h5>
<img src='images/employee.png' width='96' height='96' />
</li>

<li>
<h5>33333333</h5>
<img src='images/employee.png' width='96' height='96' />
</li>
</ul>

$(document).ready(function() {
    $("#employee li").draggable();
});

这些代码工作正常。我可以拖动元素。

但是，当我使用如下动态生成的 HTML 元素时：

function loadEmployee() {
    $.getJSON("employee!find.action", function(data) {
        var showEmployee = $("#employee");
        showEmployee.html("");
        $.each(data.employeeList, function(i, employee) {
            newDiv = $("<li>");
            var div = "<h5>" + employee.number + "</h5>";
            div += "<img src='images/employee.png' width='96' height='96' //>"
            newDiv.html(div).appendTo(showEmployee);
        });
        showEmployee.show();
    });
}
$(document).ready(function() {
    loadEmployee();
    $("#employee li").draggable();
});

这些代码可以显示员工信息，但拖动功能不起作用，我该如何解决这个问题？提前谢谢！

【问题讨论】：

这是在 SO 上发现的常见问题。尝试查看 jquery 的 .live() 函数。可能没有应用您的可拖动元素，因为它们是在可拖动初始化之后加载的。
我解决了这个问题。而不是使用 $("#employee li").draggable();我将命令 newDiv.html(div).appendTo(showEmployee) 更改为 newDiv.html(div).appendTo(showEmployee).draggable();我不确定这是不是一个好的解决方案，但它现在解决了我的问题。

标签： javascript html ajax jquery-ui drag-and-drop

【解决方案1】：

当文档准备好，页面加载之后，jQuery 在元素上调用 draggable()。默认情况下，在页面加载后与您的查询匹配的任何元素都不会应用 draggable()。

您在上面的评论中概述的解决方案（将 .draggable() 应用于 newDiv）对我来说很有意义。

【讨论】：