如何在拖放时保留<input />元素的值？

Question

我有一个网页，其中有两个<div>。这两个元素都是可拖动的;当一个人掉到另一个人身上时，会切换位置。目前，JS的工作方式是实际切换两个元素的innerHtml属性（意味着我们得到拖动元素的innerHtml，drop zone元素的innerHtml和set两个属性与另一个元素的值）。

这适用于切换元素的位置。但是，当切换发生时，<input>中的<div>个元素中的数据将被删除。拖放时如何保留此数据？

我尝试了以下内容：

• 切换DOM节点引用本身，而不是innerHtml属性
• 使用cloneNode()和$.clone()
• 获取value属性，以及innerHtml，并切换它。这被拒绝了，因为由于代码的结构方式，这将是不切实际的。

如果有帮助，我可以使用JQuery。

Answer 1

您可以使用jQuery的.detach()和.append()方法。

要在DOM上移动div，请调用$(div).detach();将其从当前位置移除，然后调用$(newParent).append(div);将其附加到新位置。

我假设div和newParent都是元素本身，或者是检索正确元素的选择器。

另见this answer。