使用 JQUERY 进行拖放和交换答案

【问题标题】：Drag and Swap with JQUERY使用 JQUERY 进行拖放和交换
【发布时间】：2016-12-13 18:10:47
【问题描述】：

我需要从两个 div 中拖动和交换内容，我尝试了以下方法，它可以正常工作并将内容正确地交换到可放置的 DIV 中，但将可拖动的 DIV 留空。

 var draggable = ui.draggable;                           
 var droppable = $(this);

  // Clear previous content
  $(this).empty();
  // Append new content
  $(this).append(draggable);


  // Clear previous content
  ui.draggable.empty();
  // Append new content
  ui.draggable.append(droppable);

我收到以下与将内容附加到可拖动 DIV 相关的错误

未捕获的 DOMException：无法在“节点”上执行“appendChild”：新的子元素包含父元素。(...)

欢迎任何想法！ :)

【问题讨论】：

stackoverflow.com/questions/4589606/…这个问题可能会对你有所帮助。
这很有用，谢谢，现在已经修改了公式并且工作正常唯一的问题是可拖动的 DIV 被正确替换但有一个额外的父 div，我正在尝试添加 childNode 等，但没有任何乐趣。 .. 这是我用于交换的新公式：
jQuery.fn.swapWith = function (to) { return this.each(function () { var copy_to = $(to).clone(); var copy_from = $(this).clone( ); $(to).empty(); $(to).append(copy_from); $(this).empty(); $(this).append(copy_to); }); };
刚刚设法摆脱了额外的 DIV ，这是更新后的公式： jQuery.fn.swapWith = function (to) { return this.each(function () { var copy_to = $(to .html()).clone(); var copy_from = $(this).clone(); $(to).empty(); $(to).append(copy_from); $(this).empty(); $(this).replaceWith(copy_to); }); };
正在使用 replaceWith 将内容复制到可拖动的 DIV 中

标签： javascript jquery html css jquery-ui

【解决方案1】：

刚刚发现您可以使用 .sortable() 更轻松地在 Angular 中实现拖动和交换，感谢您的帮助 Arun :)

【讨论】：