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函数允许您执行更正其大小的操作（如果需要，可以查看可排序的_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中，您传递了“容器”，该容器是包含所有选项的对象，＆amp;元素等等placeholder本身。

请注意，这是一个无证件的黑客，因此显然不会支持＆amp;可能会随着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!");
    }
});

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

2 个答案: