使用jQuery UI将元素拖动到另一个元素时交换元素
我在页面上有一个元素排列：
1 2 3 4 5 6 我如何使用jQuery UI（Draggable / Droppable）来使它如果一个div被丢弃到另一个div上，它们交换位置？ （如果它被拖到其他任何地方，它会恢复到原来的位置。）
谢谢。
这是一个如何通过拖放交换元素的示例http://jsfiddle.net/76yRN/1/
关于在jquery jQuery可拖动项中交换元素的另一个问题在交换后失去了它的可拖动性（使用jsfiddle示例）
希望这可以帮助
您只需将元素从一个替换为另一个。 前段时间我创建了一个演示，用于在UL列表之间交换元素。 检查一下： http ： //www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/
我使用了一系列解决方案来实现这一目标，其中#large_tiles和#small_tiles是两个列表：
$(function() { $("#large_tiles li, #small_tiles li").draggable({ zIndex: 2, appendTo: "body", }); initDroppable($("#large_tiles li, #small_tiles li")); initSwap(); function initSwap() { initDroppable($("#large_tiles li, #small_tiles li")); initDraggable($("#large_tiles li, #small_tiles li")); } function initDraggable($elements) { $elements.draggable({ zIndex: 2, appendTo: "body", helper: "clone", start: function(e, ui) { $(ui.helper).addClass("clone"); }, cursorAt: { left:50, top:75 } }); } function initDroppable($elements) { $elements.droppable({ activeClass: "active-tile", hoverClass: "hover-tile", over: function(event, ui) { var $this = $(this); }, drop: function(event, ui) { var $this = $(this); var linew1 = $(this).after(ui.draggable.clone()); var linew2 = $(ui.draggable).after($(this).clone()); $(ui.draggable).remove(); $(this).remove(); initSwap(); } }); } });