Aquí está mi código de http://jsfiddle.net/XUFUQ/1/

$(document).ready(function()
    {
        addElements();
    }
);

function addElements()
{
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>"+
        "<li id='item2' class='list1Items'>Item 2</li>"+
        "<li id='item3' class='list1Items'>Item 3</li>"
    );
}

$(function() {
    //there's the gallery and the trash
    var $gallery = $( "#list1" ),
    $trash = $( "#list2" );

    //let the gallery items be draggable
    $( "li", $gallery ).draggable({
        cancel: "button", //these elements won't initiate dragging
        revert: "invalid", //when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    //let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#list1 > li",
        drop: function( event, ui ) {
            $("#list2").append(ui.draggable);
            addElements();
    }
    });


});

En el documento listo método estoy añadiendo algunos elementos de lista1 y, a continuación, estoy inicializando la posibilidad de arrastrar en esa lista, así que por primera vez soy capaz de arrastrar los elementos de lista1. Bajando en lista2 estoy llamando addElements() función para borrar y añadir algunos elementos de la lista1. Pero soy incapaz de arrastrar estos elementos que se añaden.

¿Cómo puedo hacer que estos elementos arrastrables?

Probablemente use(), pero sin el código es difícil de decir.
Usted sólo tendrá que enlazar draggable a los nuevos elementos cada vez de crearlos.
Perdón por el retraso, no comprendo cómo publicar enlaces, por favor, vaya a través de enlace de arriba
¿Cómo puede usted utilizar .on() con la posibilidad de arrastrar?
es para detector de eventos, no inicialización del plugin

OriginalEl autor Sagar | 2013-07-30

5 Comentarios

  1. 4

    Aquí es un feo versión de lo que usted necesita hacer sobre la base de la actualización http://jsfiddle.net/XUFUQ/6/. Mejor factor de la se puede utilizar muchas veces código:

    //let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#list1 > li",
        drop: function( event, ui ) {
            $("#list2").append(ui.draggable);
            addElements();
            $( "li", $gallery ).draggable({
                cancel: "button", //these elements won't initiate dragging
                revert: "invalid", //when not dropped, the item will revert back to its initial position
                containment: "document",
                helper: "clone",
                cursor: "move"
               })
            }
    });

    Básicamente a la posibilidad de arrastrar sólo se conecta a los elementos que existen en el momento en que se ejecuta. Esto agrega el manejo de eventos de ratón diferentes para cada elemento. Si usted agregar elementos que no sabe nada acerca de ellos, por lo que necesita para llamar a la posibilidad de arrastrar de nuevo en los.

    Las otras dos respuestas tanto dar ejemplos de donde se puede añadir la posibilidad de arrastrar a asegurar los elementos que se incluyen, sino que es un ejercicio de codificación.

    OriginalEl autor Gone Coding

  2. 16

    Aquí hay un pequeño truco que he hecho para el futuro, cualquier buscador 🙂
    Este código debe ejecutarse sólo una vez y es bastante auto-explicativo.

    //The "on" event is assigned to the "document" element which is always available within the context
    //Capture all the "mouseenter" event to any child element of "document" with a specific class (you can you any valid jQuery selector you like)
    //any live and dynamic element with the class will become draggable (haven't tested on touchscreen devices)
    $(document).on("mouseenter", '.someClass', function(e){
     var item = $(this); 
     //check if the item is already draggable
     if (!item.is('.ui-draggable')) {
             //make the item draggable
             item.draggable({
                .............
             });
      }
    });

    Saludos!

    OriginalEl autor alien45

  3. 1

    hacer la recién addded elementos que se pueden arrastrar de nuevo.

    function addElements()
    {
        $("#list1").empty().append(
            "<li id='item1' class='list1Items'>Item 1</li>"+
            "<li id='item2' class='list1Items'>Item 2</li>"+
            "<li id='item3' class='list1Items'>Item 3</li>"
        );
        $("#list1 li").draggable({
            cancel: "button", //these elements won't initiate dragging
            revert: "invalid", //when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });
    }

    aquí es el el violín

    OriginalEl autor Mandeep Jain

  4. 0
        function addElements()
        {
            $("#list1").empty().append(
                "<li id='item1' class='list1Items'>Item 1</li>"+
                "<li id='item2' class='list1Items'>Item 2</li>"+
                "<li id='item3' class='list1Items'>Item 3</li>"
            );
            //there's the gallery and the trash
            var $gallery = $( "#list1" );
    
    
       $( "li", $gallery ).draggable({
                cancel: "button", //these elements won't initiate dragging
                revert: "invalid", //when not dropped, the item will revert back to its initial position
                containment: "document",
                helper: "clone",
                cursor: "move"
            });
    
    }

    Que solo tenía que empujar «.draggable (a)» el método en su «addElement ()».
    Thx a eso, vamos a adjuntar el draggrable función en cada lista anexa en su galería.

    Comprobar este violín para la corrección.
    http://jsfiddle.net/XUFUQ/7/

    OriginalEl autor Okazari

  5. 0

    Intente esto:

    $(document).ready(function () {
        addElements();
    
        var $gallery = $("#list1"),
            $trash = $("#list2");
    
    $("li", $gallery).draggable({
        cancel: "button", 
        revert: "invalid", 
        containment: "document",
        helper: "clone",
        cursor: "move"
    });
    
    $trash.droppable({
        accept: "#list1 > li",
        drop: function (event, ui) {
            $("#list2").append(ui.draggable);
            addElements();
        }
    });
    });
    
    function addElements() {
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>" +
        "<li id='item2' class='list1Items'>Item 2</li>" +
        "<li id='item3' class='list1Items'>Item 3</li>");
    
    $("#list1 > li").draggable({
        cancel: "button", //these elements won't initiate dragging
        revert: "invalid", //when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });
    
    $("#list2").droppable({
        accept: "#list1 > li",
        drop: function (event, ui) {
            $("#list2").append(ui.draggable);
            addElements();
        }
    });
    }  

    JSFIDDLE DEMO

    OriginalEl autor Dhaval Bharadva

Dejar respuesta

Please enter your comment!
Please enter your name here