RESUELTO

Así que estudié sortable() con el connectWith atributo un poco más y encontró la solución era más sencilla de lo que esperaba, pero yo estaba pensando acerca de que es una especie de atrás porque de draggable() y droppable().

Aquí está el violín: http://jsfiddle.net/DKBU9/12/


Pregunta Original de la siguiente manera:

Esta es una extensión de una anterior, de MODO que la pregunta que me sentí deben mantenerse separadas.

La pregunta original está aquí: jQuery UI – Clon drop/que se puede ordenar la lista de después de la caída del evento. Se refiere a reinicializar el drop de controlador en el clonado de los elementos.

En la parte superior de la que, sin embargo, estoy tratando de permitir que los elementos que se han arrastrado desde la primera lista que se clasifica dentro de la lanzables listas.

Aquí es un violín, esencialmente, que ilustra el comportamiento actual como resultado de la pregunta original: http://jsfiddle.net/DKBU9/7/

Y el código necesario porque ASÍ le gusta quejarse y sobredimensionamiento de estos puestos:

HTML

<ul id="draggables">

    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>

</ul>

<ul class="droppable new">

</ul>

JS

$(function() {

    $('#draggables > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });

    $('.droppable > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });

    $('#draggables').droppable({
        accept: '.droppable > li',
        drop: function(event, ui) {
            ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));
            cleanUp();
        }
    });

    initDrop($('.droppable'));

});

function initDrop($element) {

    $element.droppable({
        accept: function(event, ui) {
            return true;
        },
        drop: function(event, ui) {
            if($(this).hasClass('new')) {
                var clone = $(this).clone();                
                $(this).after(clone);
                $(this).removeClass('new');
                initDrop( clone );
            }
            ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
            cleanUp();
        }
    }).sortable({
        items: 'li',
        revert: false,
        update: function() {
            cleanUp();   
        }
    });

}

function cleanUp() {

    $('.droppable').not('.new').each(function() {
        if($(this).find('li').length == 0) {
            $(this).remove();
        }
    });

}

De referencia de la pregunta: Jquery UI combinar ordenable y la posibilidad de arrastrar

He estado tratando de utilizar este MODO de pregunta a resolver mi problema ya que el resultado es exactamente lo que estoy tratando de lograr, especialmente la última violín siempre en los comentarios de la aceptación de la respuesta, pero me parece que no puede averiguar cómo adaptarla a mi código teniendo en cuenta las diferencias de menor importancia. Por ejemplo, el violín en que la cuestión de los clones de la que se pueden arrastrar en lugar de arrastrar el elemento real y a diferencia de la mía no permitir que los elementos a ser arrastrado de nuevo en la lista inicial.

Por lo que cualquier ayuda para intentar conseguir que el resultado de mi código, sería muy apreciado.

También, en ese ejemplo, la accept atributo se establece como una función para devolver true. ¿Cuál es la razón para esto? Eso no sólo significa que vaya a aceptar cualquier cosa, o cualquier elemento draggable?

EDIT: he leído un par de respuestas que acaba de usar que se puede ordenar() con el connectWith atributo, pero por alguna razón pensé que no hizo lo que debía, en parte porque no quería que la primera lista que se pueden ordenar así. Sin embargo, el uso que se puede ordenar() solo parece quedar la funcionalidad estoy después, pero yo todavía no se han adaptado todos los controladores de eventos.

Mi respuesta va a permitir que la lista inicial no se podrá ordenar, como por la edición, pero si usted está bien con él que es ordenable, entonces creo que debería salir con la suya, ya que es más sencillo.
Sí, realmente aprecio su tiempo y esfuerzo, pero voy a seguir con esto, ya que no es realmente una gran cosa que la lista inicial es ordenable.

OriginalEl autor Bobe | 2014-01-08

1 Comentario

  1. 4

    Ver este violín.

    Hará que los objetos lanzables y ordenar en las nuevas listas, pero no en la inicial (según la edición).

    Hay un par de trucos:

    1) a Partir de la que se pueden arrastrar, he añadido una nueva función, porque tenemos que dejar un marcador de posición (uso un clon), de modo que los contenedores no saltar durante el arrastre y tenemos que inicializar el nuevo elemento draggable.

    function initDraggable($element)
    {
        $($element).draggable({
            connectToSortable: '.droppable',     
            revert: function(droppableObj)
            {
                if(droppableObj === false)
                 {                
                    $(this).removeClass('dragging');
                    return true;
                 }
                 else
                 {              
                    return false;
                 }
            },
            helper: 'clone',
            start: function(e, ui)
            {           
                $draggingParent = $(this).parent();
               $(this).addClass('dragging');
            }
        });
    }

    Nota la connectToSortable: con .droppable (Como la limpieza, creo que se debe cambiar lanzables a ordenable);

    Nota también revert: – esto nos da una oportunidad para eliminar el ‘arrastre’ de la clase (lo que hace que la original (clonado) elemento invisible) en volver.

    Finalmente, hay start que se suma el ‘arrastre’ de la clase que hace de la original (clonado) elemento invisible durante el arrastre. También se establece el $draggingParent que se utiliza para comprobar si el elemento está siendo arrastrado desde #draggables o .droppables.

    2) Luego está el droppable() para la #draggables:

     $("#draggables").droppable({    
        drop: function(ev, ui) {
            if($draggingParent[0] === $(ui.helper).parent()[0])
            {
                //dragged from draggables to draggables
                $(ui.draggable).removeClass('dragging');
            }
            else
            {            
                if(ui.draggable.parent())
                var $clone = $(ui.draggable).clone();
                $(ui.draggable).remove();
                $clone.removeClass();
                $clone.removeAttr('style');
                initDraggable($clone);
                $(this).append($clone);        
            }
        }

    Tenga en cuenta que el drop controlador comprueba si este elemento se elimina de #draggables o .droppables y actúa en consecuencia.

    3) por último, como ya se mencionó, realmente queremos que el drop sea ordenable:

    function initDroppableSort($element) {       
        $element.sortable({
           items: 'li',
            connectWith: ".droppable,#draggables",
            revert: true,
           stop: function(event, ui) {
               $(ui.item).removeClass('dragging');
                $('.dragging').remove();
                if($(this).hasClass('new')) {
                    var clone = $(this).clone();                
                    clone.empty();
                    $(this).after(clone);
                    $(this).removeClass('new');
                    initDroppableSort( clone );
                }            
                cleanUp();
            }
        });
    
    }

    Nota la connectWith y específicamente el que se refiere a ambos .droppable y #draggables.

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here