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!"); } });