jquery ui drop ne fonctionne pas avec clone d'assistance

Question

J'ai un simple glisser-déposer en utilisant jquery ui. Je veux cloner l'élément et laisser tomber le clone à la position du curseur.

$(function() { 
    $("#draggable").draggable({ 
     grid: [ 20, 20 ], 
     //helper: 'clone', 
    }); 

    $("#dropzone-panel").droppable({ 
     drop: function(event, ui) { 
      console.log("Drop Event Fired"); 
     } 
    }); 

}); 

je peux faire glisser l'élément et quand je le laisse tomber, il reste dans la bonne position.

Mais je ne veux pas déplacer l'original, je veux le cloner, puis laisser tomber le clone en place.

J'ai essayé d'appeler clone et d'ajouter un appendTo dans la fonction drop, mais cela l'ajoute juste à la fin du # dropzone-panel, plutôt que de le laisser en place.

Une idée de ce que j'ai besoin de faire, de cloner et de déposer à la position du curseur?

Answer 1

Je voudrais configurer le draggable avec l'option d'aide, puis la droppable avec l'option accept. Cela pourrait ressembler à:

$(function() { 
    $(".draggable").draggable({ 
    helper: 'clone', 
    grid: [ 20, 20 ], 
    appendTo: ".droppable" 
    }); 
    $(".droppable").droppable({ 
    accept: ".draggable", 
    drop: function(e, ui) { 
     var pos = ui.position; 
     var $obj = ui.helper.clone(); 
     $obj.css({ 
     position: 'absolute', 
     top: pos.top + "px", 
     left: pos.left + "px" 
     }); 
     $obj.appendTo(".droppable"); 
    } 
    }); 
}); 

Vous voulez utiliser les CSS pour envelopper votre largable dans une division qui a position: relative; pour assurer que le positionnement absolu de l'élément joint est maintenu.