Le clonage d'un fichier dragable Jquery entraîne également son original

Question

Je crée un outil de création de générateur d'activité. L'utilisateur, en utilisant un menu contextuel peut choisir d'ajouter un certain nombre d'éléments à la page, et pour certains d'entre eux, les remplir avec du texte. En utilisant l'interface utilisateur Jquery, tous les éléments sont déplaçables et certains sont redimensionnables. Je veux que l'utilisateur soit capable de faire une copie exacte d'un élément mais quand j'utilise la fonction clone, je reçois des résultats étranges. Je peux faire glisser l'original hors du clone, mais lorsque j'essaie de faire glisser le clone, il fait simplement glisser l'original et reste à sa place.

Heres mon code

function addobject (element_type){ 
     $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
     $("#" + counter).multidraggable({ containment: "#activitystage", grid: [10, 10],drag: function(event,ui){ showpositions(); }}); 
     $('#' + counter).contextMenu({menu: 'functionsMenu' }, function(action, el, pos) {run(action, el); }); 
     $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>"); 
    } 

    function run (action, el){ 
     switch (action){ 
      case "clone": 
       $(el).clone(true).attr('id', 'some new id').appendTo('#activitystage'); 
       break; 
} 

Answer 1

Le moyen le plus correctif pour votre problème que je peux penser est d'utiliser simplement clone (false) et rebind le glisser-déposer événement.

Essayez ce code

var attr = { containment: "#activitystage", grid: [10, 10],drag: function(event,ui){ showpositions(); }}; 

function addobject (element_type){ 
    $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
    $("#" + counter).multidraggable(attr); 
    $('#' + counter).contextMenu({menu: 'functionsMenu' }, function(action, el, pos) {run(action, el); }); 
    $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>"); 
} 

    function run (action, el){ 
     switch (action){ 
      case "clone": 
       $(el).clone(false).attr('id', 'some new id').appendTo('#activitystage').multidraggable(attr); 
       break; 
}