Comment puis-je injecter un objet dans un contexte d'un élément déplaçable dans JQuery?

Question

J'utiliser la fonction draggable/largable JQuery comme suit

div.container { 
    height:400px; 
} 

<div class="container" id="source"> 
    <div id="0">Item 0</div> 
    <div id="1">Item 1</div> 
    <div id="2">Item 2</div> 
</div> 

<div class="container" id="target"></div> 

$("#source div").draggable({ 
    helper:"clone", 
     revert:"invalid" 
    }); 

Je voudrais savoir si on peut injecter un objet dans un contexte d'un objet draggable. Quelque chose comme

var contextualObject = {"property":"value"}; 

$("#source div").draggable({ 
    helper:"clone", 
     revert:"invalid", 
     injected:contextualObject 
    }); 

donc dans le récipient cible que je pourrais utiliser quelque chose comme (avis la deuxième déclaration d'alerte)

$("#target").droppable({ 
    accept:"#source div", 
tolerance: "fit", 
drop:function(e, ui) { 
     alert("You have dropped id " + $(this).attr("id")); 

     alert("Its contextual value is: " + $(this).draggable("option", "injected.property")); 
}}); 

Comment puis-je faire?

salutations,

Answer 1

jQuery data est fait pour ce genre de chose.

$("#source div").draggable({ 
    helper:"clone", 
     revert:"invalid", 
     start: function(evt,ui) { 
      $(this).data('injected', contextualObject) 
     } 
    }); 

Ensuite, dans votre largable:

var obj = $(ui.draggable).data('injected'); 
console.log(obj.property); 

Quelques notes:

• Vous devez utiliser ui.draggable dans votre chute pour obtenir l'élément qui est tombé glisser. this est l'élément qui se lâche
• L'ID de l'élément doit commencer with a letter, pas un nombre.

J'ai une démo de travail here.