jQuery UI可排序:如何更改“占位符"的外观?目的? [英] jquery UI sortable: how can I change the appearance of the "placeholder" object?
问题描述
在 http://jqueryui.com/demos/sortable/#placeholder 给出的示例中a>占位符是拖动任何项目时出现的橙色框.
In the example given at http://jqueryui.com/demos/sortable/#placeholder the placeholder is the orange box that appears when you drag any of the items.
可以使用placeholder
选项来调整此元素-但它只能使您按照此处所述修改元素的类:
This element can be tweaked using the placeholder
option -- but it only lets you modify the class of the element as described here: http://jqueryui.com/demos/sortable/#options
我想进一步自定义此元素,例如通过向placeholder
选项提供功能的方式与向helper
选项提供功能的方式相同.
I would like to customize this element more, e.g. by supplying a function to the placeholder
option in the same manner that one can supply a function to the helper
option.
我需要更改什么(例如在sortable.js中)?
What would I need to change (e.g. in sortable.js) to do this?
推荐答案
查看ui.sortable.js(1.7.2)的源代码,您可以作弊并将placeholder
设置为具有element
的对象函数和update
函数. element
函数用于返回占位符dom对象,而update
函数允许您执行一些操作,例如更正其大小(如果要查看默认实现的功能,可以在sortable内部检查_createPlaceholder
函数. ).
Looking at the source for ui.sortable.js (1.7.2), you can cheat and set the placeholder
to an object with a element
function and an update
function. The element
function is used to return the placeholder dom object and the update
function allows you to do things like correct its size (you can check out the _createPlaceholder
function inside sortable if you want to see what the default implementation does).
因此,例如,下面的代码将创建一个列表项,其中包含单词 test 作为您的占位符(请注意,它返回实际的dom对象([0]
),而不是jQuery对象本身) :
So for example, the following will create a list item with the word test inside as your placeholder (note that it returns the actual dom object ([0]
) and not the jQuery object itself):
$("#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
本身.
If I'm reading source correctly, the element
function should be passed the current item (jQuery object) and this
should point to the sortable
itself (i.e. $("#sortable")
in this instance). In update
you're passed the "container" which is the object which holds all the options, & the element, etc & the placeholder
itself.
请注意,这是未记录的黑客行为,因此显然它不受支持&在下一个版本的jQuery UI中可能会发生变化...但是,鉴于您一直在谈论直接编辑ui.sortable.js
,它仍然可能对您有用.
Please note that this is an undocumented hack, so it would obviously be unsupported & may change with the next version of jQuery UI... but it still may be of use to you, given you were talking about editing ui.sortable.js
directly anyway.
希望有帮助.
这篇关于jQuery UI可排序:如何更改“占位符"的外观?目的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!