Jquery UI draggable: cloner si Ctrl enfoncé

Question

J'ai une liste de cellules de tables pouvant être déplacées qui peuvent être déposées sur une seconde table. Ils sont configurés pour cloner, car la table d'origine doit rester inchangée si des éléments sont tirés de cette table.

Maintenant, je veux être en mesure de déplacer les éléments déposés à l'intérieur de la deuxième table de cellule en cellule. Mais si vous appuyez sur la touche Ctrl tout en faisant glisser un élément dans la seconde table, l'élément doit être cloné. Maintenant, je ne sais pas comment atteindre élégamment cette dernière partie.

Mon code à ce jour, seul le clone sur une partie Ctrl est manquante:

$(".drag_clone").draggable({helper: "clone"}); 
$(".draggable").draggable({revert: "invalid"}); 
$(".droppable").droppable(
    { 
     drop: function(event, ui) { 
      if (ui.draggable.hasClass("draggable")) { 
       ui.draggable.remove(); 
      } 
      $('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this); 
     } 
    }); 

Le comportement que je voudrais achive est que si un élément est déplacé vers une autre cellule de la table, il devrait être déplacé là. Si l'élément est déplacé pendant que la touche Ctrl est enfoncée ou s'il s'agit de l'un des éléments prédéfinis qui doivent toujours être clonés, une copie de l'élément doit être créée et insérée dans la cellule cible.

Dans le code que j'ai collé ici, je crée un nouvel élément qui est ensuite ajouté au droppable. Cela fonctionne très bien pour les draggables de clones, mais avec les draggables non-clones, le draggable original reste, donc je finis par le dupliquer.

Si j'applique à la place le draggable à la droppable cible, le clone draggable est supprimé de son emplacement d'origine.

Edit: J'ai trouvé le problème, j'utilisais ui.draggable, qui fait référence à la draggable d'origine, et non ui.helper qui fait référence à celui cloné. Ajouter la finale, le code de travail ici comme référence:

$(".drag_clone").draggable({helper: "clone"}); 
$(".draggable").draggable({revert: "invalid"}); 
$(".droppable").droppable(
    { 
     hoverClass: 'ui-state-hover', 
     drop: function(event, ui) { 
      ui.helper.remove() 
      $('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event) 
       {$(this).draggable('option', { 
         helper : event.ctrlKey ? 'clone' : 'original' }); 
         }).draggable({ revert: "invalid" }).appendTo(this); 
     } 
    }); 

Answer 1

Vous pouvez le faire en attachant un gestionnaire mousedownavant l'appel, comme .draggable() ceci:

$(".draggable").mousedown(function(event) { 
    $(this).draggable('option', { helper : event.ctrlKey ? 'clone' : 'original'}); 
}).draggable({ revert: "invalid" }); 

You can see it in action here, depuis le widget fonctionne également sur mousedown, nous voulons juste attacher un gestionnaire d'événement avant le gestionnaire du widget, puisque les gestionnaires d'événements exécutent dans l'ordre lié, donc tout ce que nous faisons est de régler le helper option juste avant t il traîne commence.