Question

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

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

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

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

如何将源项目拖动时的某些数据传递到可排序列表中的某些数据，该列表似乎会触发可排序列表的start和stop功能？
如何在列表中插入自定义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"
    });
});

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

1 个答案: