jquery - 如何在 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 数据就是为这类事情制作的。

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

然后，在你的 droppable 中：

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

几点注意事项：

• 您应该ui.draggable在 drop 中使用来获取拖放的项目。this物品是否掉落
• 元素 id 应该以字母开头，而不是数字。

我在这里有一个工作演示。