使用 jQuery UI 将一个元素拖到另一个元素上时交换元素 [英] Swap elements when you drag one onto another using jQuery UI

问题描述

我有一个页面上的元素排列:

<div class="dragdrop" style="top:0px;left:0px;">1</div><div class="dragdrop" style="top:40px; left: 0px; ">2</div><div class="dragdrop" style="top:60px; left: 0px; ">3</div><div class="dragdrop" style="top:0px; left: 100px;">4</div><div class="dragdrop" style="top:40px; left: 100px;">5</div><div class="dragdrop" style="top:60px; left: 100px;">6</div></div>

如何使用 jQuery UI (Draggable/Droppable) 来实现，如果一个 div 被拖放到另一个 div 上，它们会交换位置?(如果它被拖到其他任何地方，它就会恢复到原来的位置.)

谢谢.

解决方案

这是一个如何通过拖放交换元素的示例 http://jsfiddle.net/76yRN/1/

关于在 jquery 中交换元素的另一个问题 jQuery 可拖动项在被交换后失去了可拖动性(以 jsfiddle 为例)

希望对你有帮助

I have an arrangement of elements on a page:

<div>
  <div class="dragdrop" style="top:0px;  left: 0px;  ">1</div>
  <div class="dragdrop" style="top:40px; left: 0px;  ">2</div>
  <div class="dragdrop" style="top:60px; left: 0px;  ">3</div>
  <div class="dragdrop" style="top:0px;  left: 100px;">4</div>
  <div class="dragdrop" style="top:40px; left: 100px;">5</div>
  <div class="dragdrop" style="top:60px; left: 100px;">6</div>
</div>

How can I use jQuery UI (Draggable / Droppable) to make it so that if one div is dropped onto another, they swap positions? (And if it's dragged anywhere else, it reverts back to its old position.)

Thanks.

解决方案

Here is an example of how you can swap elements with drag and drop http://jsfiddle.net/76yRN/1/

Another question about swapping elements in jquery jQuery draggable items lose their draggability after being swapped (with jsfiddle example)

Hope this helps

这篇关于使用 jQuery UI 将一个元素拖到另一个元素上时交换元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！