Question

我正在尝试使用over droppable回调函数中的jQuery UI交换元素。交换本身工作正常，但之后被拖动的对象显示在错误的位置。交换后是否有可能重新计算头寸？

请参阅以下示例：

$(".dragme")
  .draggable({
    revert: true,
    revertDuration: 0,
    scroll: false
  })
  .droppable({
    over: function(event, ui) {
      // Get drag & drop elements
      var a = $(this);
      var b = $(ui.draggable);

      // Swap those elements
      var tmp = $('<span>').hide();
      a.before(tmp);
      b.before(a);
      tmp.replaceWith(b);

      // TODO: Refresh Position?
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div style="width: 110px; height: 100px;">
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: red;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: blue;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: green;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: turquoise;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: magenta;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: yellow;"></div>
</div>

编辑：根据T J建议的helper: clone和visible: false，如果悬停在原始位置上，多次交换无效：

$(".dragme")
  .draggable({
    revert: true,
    revertDuration: 0,
    scroll: false,
  helper: 'clone',
  start: function(e, ui) {
    $(this).css('visibility', 'hidden');
  },
  stop: function() {
    $(this).css('visibility', 'visible');
  }
  })
  .droppable({
    over: function(event, ui) {
      // Get drag & drop elements
      var a = $(this);
      var b = $(ui.draggable);

      // Swap those elements
      var tmp = $('<span>').hide();
      a.before(tmp);
      b.before(a);
      tmp.replaceWith(b);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div style="width: 110px; height: 100px;">
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: red;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: blue;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: green;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: turquoise;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: magenta;"></div>
  <div class="dragme" style="display: inline-block; width: 50px; height: 50px; background-color: yellow;"></div>
</div>

Answer 1

您可以隐藏被拖动的元素，并在操作DOM中实际元素的位置时使用helper元素进行视觉反馈。由于我们不操纵助手的位置，因此UI中不会出现任何定位问题。

一个问题是在拖动操作期间会在DOM中注入辅助元素，因此您可能希望将其从依赖于DOM的其余代码中过滤出来

$(".dragme")
  .draggable({
    revert: true,
    helper: "clone",
    revertDuration: 0,
    scroll: false,
    start: function(e, ui) {
      $(this).addClass('hidden');
    },
    stop: function() {
      $(this).removeClass('hidden');
    }
  })
  .droppable({
    over: function(event, ui) {
      // Get drag & drop elements
      var a = $(this);
      var b = $(ui.draggable);
      b.before(a);
    }
  });

* {
  margin: 0px;
  padding: 0px;
}
.container {
  width: 110px;
  height: 100px;
  font-size:0;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.turq {
  background-color: turquoise;
}
.magenta {
  background-color: magenta;
}
.yellow {
  background-color: yellow;
}
.hidden {
  visibility: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="box dragme red"></div>
  <div class="box dragme blue"></div>
  <div class="box dragme green"></div>
  <div class="box dragme turq"></div>
  <div class="box dragme magenta"></div>
  <div class="box dragme yellow"></div>
</div>

如何在使用jquery ui拖动时交换悬停元素

1 个答案: