jQuery UI: Arrastre y clone desde div original, pero guarde los clones

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 tirar cartas/divs 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 utilizado el siguiente, que no funcionaba como quería:

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

me di cuenta de que 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

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 2

Aquí fue 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 3

Si está Tring para mover elementos (por ejemplo < li/>) de un #source < ul/> a un #destination < ul/>, y que le gustaría que para clonar (en contraposición a mover), y seguir siendo clasificable a la derecha, me encontré con esta solución:

$(function() { 

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

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

    }); 

sé que parece de ultra sencillo, pero funcionó para mí! :)

Answer 4

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 + ")"); 
     } 
    }); 
});