Jquery Drag n Drop Stage

Question

J'essaie de créer une scène. J'ai 5 articles dans un div draggable. Les clones seront traînés dans 20 zones de dépôt. J'ai créé 20 boîtes de div avec des identifiants différents.

Signifie plusieurs zones de largage.

Le problème est que je ne ai pas l'idée que comment puis-je obtenir id de la div où l'élément est abandonné et comment, je vais montrer ce produit uniquement dans ce div. En ce moment, il affiche tous les éléments dans un seul premier div.

Le problème principal est que nous pouvons créer plusieurs zones de dépôt de manière dynamique et déposer un élément dans cette zone spécifique.

Merci à l'avance

Answer 1

événement Draggable jQuery-UI largable gestionnaire

Vous devez obtenir l'objet dom largable des arguments d'événements passés à la méthode de la goutte.

$(".selector").droppable({ 
    drop: function(event, ui) { 
    // $(this) represents the droppable. 
    alert($(this).attr("id")); 
    } 
}); 

l'objet draggable peut être référencé par ui.draggable. La plupart de cela a été pris de la documentation jQuery-UI trouvé at the jQuery-ui Website

Ajout largable à un Dynamiquement Ajouté Element

Dans le cas où les éléments, nous allons les appeler des cibles de la scène, sont dynamiquement ajoutés au " étape "alors vous voudriez appeler la méthode droppable sur ces éléments quand ils sont créés.

function makeStageTargets(i) { 
    for(i;i--;true){ 
    var d = $("div").attr("id","item_"+i); // this will make a div id item_i 
    $("stage").append(d); 
    d.droppable(
     drop:function(e, ui){ 
     var param = $(ui.draggable).attr('src'); 
     $("stage").remove(ui.draggable); // this will remove an item when dropped 
     addlist(param); 
     }); 
    } 
} 
makeStageTargets(60); 

Si j'ai manqué l'esprit de votre question s'il vous plaît aviser.

Answer 2

Voici le code que je utilise

$ ("div_item"). Largable ({

 drop: 
      function(e, ui) 
       { 
        var param = $(ui.draggable).attr('src'); 

        addlist(param); 
       } 

}); 

Où addlist() est une fonction pour obtenir le contenu ajax et affichage dans div comme $ . ('#div_item') append (msg.txt);

variable 'msg' pour obtenir les détails de l'article à partir du fichier ajax

le problème est avec id div_item Ce sont plus de 20, co.. Je veux être jusqu'à 60. Je veux aussi restreindre chaque div avec un seul. Un grand merci pour votre aide