jquery UI sortable：如何更改“占位符”对象的外观？

Question

在http://jqueryui.com/demos/sortable/#placeholder 给出的示例中，占位符是拖动任何项目时出现的橙色框。

可以使用placeholder 选项调整此元素——但它只允许您修改元素的类，如下所述：http://jqueryui.com/demos/sortable/#options

我想更多地自定义这个元素，例如通过向placeholder 选项提供函数的方式与向helper 选项提供函数的方式相同。

我需要改变什么（例如在 sortable.js 中）才能做到这一点？

Answer 1

查看 ui.sortable.js (1.7.2) 的源代码，您可以作弊并将placeholder 设置为具有element 函数和update 函数的对象。 element 函数用于返回占位符 dom 对象，update 函数允许您执行诸如更正其大小之类的操作（如果您想查看默认实现的功能，可以查看 sortable 中的 _createPlaceholder 函数)。

例如，下面将创建一个列表项，其中包含单词 test 作为占位符（注意它返回实际的 dom 对象 ([0]) 而不是 jQuery 对象本身） ：

$("#sortable").sortable({
    placeholder: {
        element: function(currentItem) {
            return $("<li><em>test</em></li>")[0];
        },
        update: function(container, p) {
            return;
        }
    }
});

如果我正确读取源代码，element 函数应传递当前项（jQuery 对象），this 应指向 sortable 本身（即在此实例中为 $("#sortable")）。在update 中，您传递了“容器”，它是包含所有选项、元素等的对象以及placeholder 本身。

请注意，这是一个未记录的 hack，因此它显然不受支持，并且可能会随着 jQuery UI 的下一个版本而改变......但它仍然可能对你有用，因为你反正是在谈论直接编辑ui.sortable.js。

希望对您有所帮助。

Answer 2

我发现了一种更骇人听闻的方法：可以使用start 选项来修改占位符元素，例如如下

$("#sortable").sortable({
    start: function (e, ui) { 
      // modify ui.placeholder however you like
      ui.placeholder.html("I'm modifying the placeholder element!");
    }
});