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函数允许您执行更正其大小的操作(_createPlaceholder如果要查看默认实现的作用,可以查看sortable中的函数).

因此,例如,下面将创建一个列表项,其中包含单词test inside作为占位符(请注意,它返回实际的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自身的对象.

请注意,这是一个未记录的黑客,所以它显然是不受支持的,并且可能会随着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!");
    }
});