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

Question

请看this jsFiddle.

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

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

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

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

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

任何帮助将不胜感激。

Answer 1

这是一个棘手的问题。

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

JQuery data 方法存储元素的数据，由于上面描述的克隆创建行为，不容易带来信息。

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

这里是代码和小提琴：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"
    });
});​