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

1 个答案: