3

请看一下这个 jsFiddle。

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

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

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

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

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

任何帮助将不胜感激。

4

1 回答 1

3

这是一个棘手的问题。

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

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

一种解决方法可能是使用简单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>

​</p> 

$(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"
    });
});​
于 2013-01-02T20:53:17.873 回答