jQuery UI可sorting:如何更改“占位符”对象的外观?

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

这个元素可以使用placeholder选项进行调整 – 但它只能让你修改这里描述的元素的类: http : //jqueryui.com/demos/sortable/#options

我想自定义这个元素更多,例如通过提供一个函数的placeholder选项,可以提供一个函数的helper选项相同的方式。

我需要改变什么(例如在sortable.js中)来做到这一点?

查看ui.sortable.js(1.7.2)的源代码,可以使用element函数和update函数将placeholder设置为一个对象。 element函数用于返回占位符dom对象, update函数允许您执行更正大小的操作(如果您想查看默认实现的function,可以查看可sorting的_createPlaceholder函数)。

所以,例如,下面将创build一个单词testing里面作为您的占位符(注意,它返回实际的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无论如何。

希望有所帮助。

我发现了一个比较黑客的方法:可以使用start选项来修改占位符元素,例如,如下所示

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