jQuery UI Draggable Helper Problème?

Question

J'ai un tas de photos sur la gauche et je veux les faire glisser dans une fente sur la droite, mais quand je fais glisser les images dans la fente sur la droite, celle de gauche disparaît.

J'ai ajouté le helper: 'clone' à ma fonction draggable et il l'enlève toujours. J'utilise le positionnement ui.draggable.css pour positionner l'élément traîné en haut de l'emplacement. Je pense que c'est peut-être le problème, mais je ne suis pas sûr de savoir comment le réparer?

Existe-t-il un moyen de cloner l'objet avant de le faire glisser, puis de faire glisser l'élément déplacé sur le point de dépôt? Sans avoir à utiliser .css pour déplacer manuellement l'élément déplaçable au-dessus de la fente.

Answer 1

La façon la plus simple d'accomplir ce que vous demandez est de le combiner avec la classe droppable. Voici une idée de base de ce que je fais référence à:

<img class="draggable" src="http://jsfiddle.net/img/keys.png"> 
<img class="draggable" src="http://jsfiddle.net/img/logo.png"> 
<img class="draggable" src="http://jsfiddle.net/img/info-close.png"> 

<div id="dropzone" class="dropzone" style=""></div> 


$(function() { 
    $(".draggable").draggable({ 
     helper: "clone", 
     grid: [ 20,20 ] 
    }); 
    $("#dropzone").droppable({ 
     drop: function(event, ui) { 
      $this.append(ui.draggable); 
     } 
    }); 
}); 

J'ai ajouté un jsFiddle (http://jsfiddle.net/fordlover49/deb9W/) pour vous aussi.