Jquery可拖拽 - 如何动态创建一个可拖拽的div并使其可以被拖拽？

Question

8

我正在使用jquery、draggable和droppable创建一个日程计划表。

当将工作从未分配的列拖到小时时间段中时，原始可拖动项将被删除，并在页面上放置一个新的div，其中包含工作细节。

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

只有当它们使用javascript动态创建时，才会发生一些阻止它们被拖动的事情。

当我使用Javascript动态创建这些新的div标签时，是否需要做一些事情告诉jquery这些新项目是可以拖动的？

步骤：

1. 我们有一个包含作业列表（更多的div）的div容器。#unassignedjobs是这些作业的父div，其中包含以下作业：#jobN，#jobN2，#jobN3

2. 我们还有另一个区域，可以将这些项拖放到其中，该区域内部有一个用于显示每个人的作业的容器，我们称之为#person1和#person2。

3. 目标是将作业从未分配的作业列表中拖出，并将其放入人员作业列表中。

4. 当我这样做时，每当项目被放下并且使用ajax / php重新制作此人的工作列表（＃person1）并重新填充＃person1时，我会刷新＃person1中的所有html。

5. 每当从php创建页面时，jquery激活时，＃person1内部的任何作业都存在，使它们可拖动。只有当刷新和重新填充innerHTML运行时，项目（＃jobN或＃jobN2）才无法拖动。

希望这能更清楚地解决问题。

- Matt

2个回答

2

不要替换新的 div，为什么不禁用可拖动功能呢？

$(element).draggable('disable');

当您想再次使其可拖动时，请使用以下方法：

$(element).draggable('enable');

- Gausie

新的div是绝对定位，位于相对定位的div标签内部。基本上，工作被拖到人们的日视图中。因此，当一个工作被放下时，它必须被注入到HTML的特定位置。 - Matt

嗯...我不认为我理解你想做什么。你能用项目符号列出来吗？ - Gausie

我已经在主线程中添加了，这样更清晰了吗？顺便说一句，感谢您抽出时间。 - Matt

好的。你目前的方法意味着你将不得不重新应用拖动功能。我认为更明智的做法是改变你的方法，即在人物内部构建元素，而不是每次刷新HTML。无论如何，你可以在应用刷新后（通过你给它的ID）引用该元素，并给它相同的可拖动选项。 - Gausie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

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

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

或者

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