Swap éléments lorsque vous faites glisser l'une sur l'autre à l'aide de jQuery UI

J'ai un arrangement d'éléments sur une 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>

Comment puis-je utiliser jQuery UI (Draggable /Drop) de faire en sorte que si un div est déposée sur l'autre, ils s'échangent les positions? (Et si c'est traîné partout ailleurs, il revient à son ancienne position.)

Grâce.

Cela peut vous aider stackoverflow.com/questions/4589606/...

OriginalL'auteur James | 2011-10-02

  1. 14

    Voici un exemple de comment vous pouvez permuter les éléments par glisser-déposer http://jsfiddle.net/76yRN/1/

    Une autre question sur la permutation des éléments de jquery jQuery déplaçable éléments perdent leur draggability après avoir été échangé (avec jsfiddle exemple)

    Espère que cette aide

    j'ai construit sur cette réponse de créer une version qui swaps div contenu pour supprimer le JavaScript depuis le début. stackoverflow.com/a/42839376/7441661 merci!

    OriginalL'auteur satrun77

  2. 1

    Vous venez de remplacer les éléments de l'un à l'autre. Il y a quelques temps j'ai créé une démo pour la permutation des éléments entre UL liste. vérifiez ceci:
    http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/

    OriginalL'auteur hirendra

  3. 0

    J'ai utilisé une combinaison de solutions pour arriver à ce niveau, avec #large_tiles et #small_tiles deux listes:

    $(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();
        }
    });
}
});

    OriginalL'auteur Kirk Ross