jquery - 如何将数据从可拖动项目传递到连接的可排序列表

Question

请查看this jsFiddle.

我想要实现的是允许用户将三个项目之一拖动到顶部并将它们放入排序列表中。我添加了一个自定义助手，它现在是一个占位符，将用于显示该项目的预览。

为了便于讨论，我们假设三个可拖动元素是源项，而最终出现在可排序列表中的是目标项。我遇到的困难是将正确的内容传递给可排序列表中的 stop 函数，并将该内容插入列表中，而不是源项目的默认克隆。我还想通过源项目传递一些附加信息。例如，我想在停止函数中知道该元素是否来自可拖动源项目之一，或者它只是正在重新排序的目标项目之一。

如果您检查控制台，您可以看到我所做的一些不成功的尝试。我尝试在 event.data 中设置值，但在可排序列表的启动和停止函数中收到 TypeError: event.data is null 。所以我想我在这里遗漏了一些东西。

重申我的问题，我面临两个相关问题:

1. 如何传递从源项目被拖动到将其放入可排序列表中的一些数据，这似乎触发了可排序的 start 和 stop 函数列表？
2. 如何在列表中插入自定义 div，而不是源项目的默认克隆？

任何帮助将不胜感激。

Answer 1

这是一个棘手的问题。

主要问题是，一起工作的sortable和draggable小部件使用元素的克隆，而不是元素本身。

作为JQuery data方法存储元素的数据，由于上述克隆创建行为，因此不容易携带该信息。

解决方法可能是使用简单的 div 来存储和检索事件回调中的数据。它之所以有效，是因为始终只拖动一个元素。

这是代码和 fiddle :http://jsfiddle.net/ghMaP/4/

<ul id="draggable">
    <li class="ui-state-default">Button</li>
    <li class="ui-state-default">Text Field</li>
    <li class="ui-state-default">Image</li>
</ul>

<ul id="sortable" class="ui-state-highlight">
</ul>

<!-- New div used to store and retrieve data of dragged element -->
<div id="tmp"></div>

​

$(document).ready(function() {

    //Shortcut on the temp div
    $tmp = $("#tmp").get(0);

    $("#sortable").sortable({
        start: function(event, ui) {
        },
        stop: function(event, ui) { 
            //Here, we retrieve data from the temp div
            console.log("isNew : ", jQuery.data($tmp, "isNew"));
            console.log("resultHTML : ", jQuery.data($tmp, "resultHTML"));
        }
    });

    $("#draggable li").draggable({
        connectToSortable: "#sortable",
        start: function(event, ui) {    

            //Store info in a tmp div         
            jQuery.data($tmp, "isNew", true);
            jQuery.data($tmp, "resultHTML", "<b>Here I will add some custom html to EVENT data</b>");

        },
        helper: function(event) {
            return "<div class='custom-helper'>Custom helper for " + $(this).context.innerHTML + "</div>";   
        },
        revert: "invalid"
    });
});​