Swap элементы при перетаскивании один на другой с помощью jQuery UI

У меня есть расположение элементов на странице:

<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 падает на другой, они меняют позиции? (И если его тащат куда-то еще, он возвращается в прежнее положение.)

спасибо.

8
drag-and-drop jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

3 ответов

вот пример того, как вы можете поменять элементы с помощью перетаскиванияhttp://jsfiddle.net/76yRN/1/

еще один вопрос об обмене элементами в jquery в jQuery можно перетаскивать предметы теряют свои draggability после смены (с jsfiddle пример)

надеюсь, что это помогает

14

вы просто заменяете элементы от одного к другому. Некоторое время назад я создал демо для замены элементов в список ul. проверить это: http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/

1

я использовал комбинацию решений, чтобы прийти к этому, при этом #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();
        }
    });
}
});
0