在拖动过程中交换元素 - jquery ui

Question

我想在拖动过程中交换元素。例如，当我将红色框拖入带有蓝色框的容器时，该容器中的蓝色框将变为红色框，而我拖动的红色框将变为蓝色框。那我就继续把蓝色的盒子拖走。都是拖动过程。

HTML:

<div class="parent">
  <div class="child" id="child1"></div>
</div>
<div class="parent">
  <div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

Js:

$("document").ready(function() {
  $(".child").draggable({
    /* revert: true */
  });
  $(".parent").droppable({
    //accept: '.child',
    drop: function(event, ui) {
    },
    over: function(event, ui) {
      if ($(this).children().length > 0) {
        $(ui.draggable).html($(this).children());
      }
      $(this).html(ui.draggable);
    },
  });
});

结果不是我所期望的。你可以在这里看到演示：https://jsfiddle.net/lion5893/845ybwLs/23/

Answer 1

考虑如下函数：

function dragSwap(a, b) {
  var id1 = a.attr("id");
  var id2 = b.attr("id");
  b.attr("id", id1);
  a.attr("id", id2);
}

看你的代码，元素是一样的，都是<div>，类一样，唯一的区别是id.

你可能有这样的事情：

over: function(event, ui) {
  if ($(this).children().length > 0 && $(this).children().length == 1) {
    var item = $(this).children().eq(0);
    var drag = ui.draggable;
    dragSwap(item, drag);
  }
}

工作示例：https://jsfiddle.net/Twisty/y285a4bq/

希望对您有所帮助。

在拖动过程中交换元素 - jquery ui

Swap element during drag - jquery ui

jquery

drag-and-drop

drag

jquery-ui-draggable