javascript - code - jQuery UI: arrastre y clone desde div original, pero mantenga clones

jquery appendto

Question

Tengo un div, que tiene jQuery UI Draggable aplicado. Lo que quiero hacer es hacer clic y arrastrar eso, y crear un clon que se mantenga en el dom y no se elimine cuando se descarte.

Piensa en un mazo de cartas, mi elemento de caja es el mazo, y quiero sacar cartas / div de ese mazo y colocarlos alrededor de mi página, pero serían clones del div original. Solo quiero asegurarme de que no puedas crear otro clon de uno de los divs clonados.

He usado lo siguiente, que no funcionó como yo quería:

$(".box").draggable({ 
        axis: ''y'',
        containment: ''html'',
        start: function(event, ui) {
            $(this).clone().appendTo(''body'');
        }
});

Descubrí mi solución:

$(".box-clone").live(''mouseover'', function() {
    $(this).draggable({ 
        axis: ''y'',
        containment: ''html''
    });
});
$(".box").draggable({ 
    axis: ''y'',
    containment: ''html'',
    helper: ''clone''
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass(''box ui-draggable ui-draggable-dragging'').addClass(''box-clone'').appendTo(''body'');
    }
});

Answer 1

Aquí estaba su solución:

$(".box-clone").live(''mouseover'', function() {
    $(this).draggable({ 
        axis: ''y'',
        containment: ''html''
    });
});
$(".box").draggable({ 
    axis: ''y'',
    containment: ''html'',
    helper: ''clone''
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass(''box ui-draggable ui-draggable-dragging'').addClass(''box-clone'').appendTo(''body'');
    }
});

Answer 2

Así es como lo hice funcionar: PD: ''marcador'' es el objeto para arrastrar y ''mapa'' es el contenedor de destino.

$(document).ready(function() {
    //source flag whether the drag is on the marker tool template
    var template = 0;
    //variable index
    var j = 0;
    $(".marker").draggable({
        helper: ''clone'',
        snap: ''.map'',
        start: function(event, ui) {
            //set the marker tool template
            template = 1;
        }
    });
    $(".map").droppable({
        accept: ".marker",
        drop: function(event, ui) {
            $(this).find(''.map'').remove();
            var item = $(ui.helper);
            var objectid = item.attr(''id'');
            //if the drag is on the marker tool template
            if (template == 1) {
                var cloned = $(item.clone());
                cloned.attr(''id'', ''marker'' + j++);
                objectid = cloned.attr(''id'');
                cloned.draggable({
                    containment: ''.map'',
                    cursor: ''move'',
                    snap: ''.map'',
                    start: function(event, ui) {
                        //Reset the drag source flag 
                        template = 0;
                    }
                });
                cloned.bind("contextmenu", function(e) {
                    cloned.remove();
                    return false;
                });
                $(this).append(cloned);
            }
            i++;
            var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
            var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
            alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")");
        }
    });
});

Answer 3

Esto es lo que finalmente hice que funcionó:

$(".box-clone").live(''mouseover'', function() {
    $(this).draggable({ 
        axis: ''y'',
        containment: ''html''
    });
});
$(".box").draggable({ 
    axis: ''y'',
    containment: ''html'',
    helper: ''clone'',
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass(''box ui-draggable ui-draggable-dragging'').addClass(''box-clone'').appendTo(''body'');
    }
});

Answer 4

Si intenta mover elementos (digamos <li />) de un #source <ul /> a un #destination <ul />, y desea que se clonen (en lugar de moverse), y aún así estar ordenable a la derecha, encontré esta solución:

$(function() {

    $("#source li").draggable({
        connectToSortable: ''#destination'',
        helper: ''clone''
    })

    $("#destination").sortable();

  });

Sé que parece muy simple, ¡pero funcionó para mí! :)