Jquery Draggable - 如何动态创建一个新的可拖动 div，然后可以拖动？

Question

我正在使用 jquery 创建一个可拖动和可放置的日程安排器。

当作业从未分配的列拖动到小时时间段中时，原始的可拖动项目将被删除，并且新的 div 会被放置到页面中，其中包含作业详细信息。

这个新创建的 div 代码块中包含使其可拖动的所有参数。当它在页面加载上呈现时，这些分配的作业是可拖动的。

只有当使用 JavaScript 即时创建它们时，才会发生阻止它们被拖动的情况。

当我使用 Javascript 即时创建这些新的 div 标签时，我需要做些什么来告诉 jquery 这些新项目要被拖动吗？

(一如既往地提前致谢)

步骤

• 我们有一个 div 容器，里面有一个作业列表(更多 div)。 #unassignedjobs 是这些作业的父 div，里面有以下作业，#jobN ,#jobN2, #jobN3
• 我们还有另一个区域，可以将这些项目放入其中，该区域内有一个用于显示每个人的职位的容器，我们将其称为#person1 和 #person2。
• 目的是从未分配的职位列表中拖动职位，并将其放入职位的人员列表中
• 当我执行此操作时，当删除某个项目时，我会刷新#person1 内的所有 html，并使用 ajax/php 重新创建此人的工作列表(#person1 )并使用innerHTML重新填充#person1。

• 每次从 php 创建页面时，当激活 jquery 时，#person1 中的任何作业都会出现，从而使它们可拖动。 只有当刷新并重新填充innerHTML时，项目(#jobN或#jobN2)才无法拖动

  var createContent = httpRequest.responseText;

  jobcolp.innerHTML =createdContent;

希望这能让问题更加清晰。

Answer 1

只需将draggable应用于新创建的DIV即可。如果DIV除了位置之外完全相同，您也可以不重新创建它，而只是重新定位它。这将保留它的所有处理程序。

 // remove, reposition, reapply handlers
 $('#jobN').remove().appendTo('#dayViewN').draggable();

或

 // reposition, retain handlers
 $('#jobN').appendTo('#dayViewN');