7

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

<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 上，它们会交换位置？（如果它被拖到其他任何地方，它就会恢复到原来的位置。）

谢谢。

4

3 回答 3

13

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

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

希望这可以帮助

于 2011-10-04T20:44:33.887 回答
1

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

于 2013-03-19T16:45:41.233 回答
0

我使用了多种解决方案的组合来实现这一点，#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();
        }
    });
}
});
于 2014-05-07T21:27:02.843 回答