Tengo un arreglo de elementos en una página:

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

¿Cómo puedo usar jQuery interfaz de usuario (que se pueden arrastrar /Drop) para hacerlo de modo que si un div se dejó caer en otro, se intercambian las posiciones? (Y si es arrastrado en cualquier otro lugar, vuelve a su antigua posición.)

Gracias.

OriginalEl autor James | 2011-10-02

3 Comentarios

  1. 14

    Aquí es un ejemplo de cómo usted puede intercambiar los elementos con la función de arrastrar y soltar http://jsfiddle.net/76yRN/1/

    Otra pregunta sobre el intercambio de elementos en jquery jQuery se pueden arrastrar los elementos pierden su draggability después de ser intercambiado (con jsfiddle ejemplo)

    Espero que esto ayude

    he construido sobre esta respuesta para crear una versión de swaps div de contenido para eliminar el JavaScript desde el principio. stackoverflow.com/a/42839376/7441661 gracias!

    OriginalEl autor

  2. 0

    He utilizado una combinación de soluciones para llegar a este, con #large_tiles y #small_tiles dos listas:

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

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here