jquery UI 可排序 : how can I change the appearance of the "placeholder" object?

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 函数和 更新功能。 element 函数用于返回占位符 dom 对象，而 update 函数允许您执行诸如更正其大小之类的操作(您可以查看 _createPlaceholder如果您想查看默认实现的作用，请在 sortable 中使用 code> 函数)。

例如，下面将创建一个列表项，其中包含单词 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。