如何在JQuery中的可拖動元素的上下文中注入對象？

Question

我使用可拖動/可投放JQuery的特徵如下

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" 
    }); 

我想知道是否是可能的注入一個可拖動的對象的上下文中的對象。喜歡的東西

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

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

因此，在目標容器我可以使用類似（注意第二個警告語句）

$("#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")); 
}}); 

我該怎麼辦呢？

問候，

Answer 1

jQuery data爲這種事做。

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

然後，在你投擲的：

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

有兩點要注意：

• 您應該使用ui.draggable你去取那就是拖和下降的項目。 this是物品掉落
• 元素ID應該從with a letter開始，而不是數字。

我有一個工作演示here。