Question

我需要为我的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();
});

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

Answer 1

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

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

拖放动态生成的html元素

1 个答案: