使用 jQuery UI 将一个元素拖到另一个元素上时交换元素

Posted 2023-05-08

【中文标题】使用 jQuery UI 将一个元素拖到另一个元素上时交换元素

【英文标题】：Swap elements when you drag one onto another using jQuery UI

【发布时间】：2011-11-29 08:05:53

【问题描述】：

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

<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>

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

谢谢。

【问题讨论】：

这可能对你有帮助***.com/questions/4589606/…

【参考方案1】：

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

另一个关于jquery中交换元素的问题jQuery draggable items lose their draggability after being swapped (with jsfiddle example)

希望对你有帮助

【讨论】：

我在这个答案的基础上创建了一个交换 div 内容以从一开始就删除 javascript 的版本。 ***.com/a/42839376/7441661 谢谢！

【参考方案2】：

您只需将元素从一个替换为另一个。前段时间我创建了一个演示，用于在 UL 列表之间交换元素。检查这个： http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/

【参考方案3】：

我使用了多种解决方案来实现这一点，#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();
        
    );

);