Interfaccia utente jQuery: trascinare e clonare dal div originale, ma mantenere i cloni

Question

Ho un div, che ha applicato jQuery UI Draggable. Quello che voglio fare è cliccare e trascinare quello, e creare un clone che è conservato nel dom e non rimosso quando viene rilasciato.

Pensa a un mazzo di carte, il mio elemento casella è il mazzo, e voglio estrarre carte/div da quel mazzo e farle posare sulla mia pagina, ma sarebbero cloni del div originale. Voglio solo assicurarmi di non poter creare un altro clone di uno dei div clonati.

ho usato il seguente, che non ha funzionato come avrei voluto:

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

ho capito la mia soluzione:

$(".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

Ecco cosa ho finalmente funzionato:

$(".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

qui era la sua soluzione:

$(".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

Se stai Tring per spostare gli elementi (diciamo < Li/>) da un #source < ul/> ad un #destination < ul/>, e vuoi loro di clonare (al contrario di muoversi), ed essere ancora ordinabili a destra, ho trovato questa soluzione:

$(function() { 

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

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

    }); 

so che sembra semplice ultra, ma ha funzionato per me! :)

Answer 4

Ecco come ho funzionato: PS: "indicatore" è l'oggetto da trascinare e "mappa" è il contenitore di destinazione.

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