jquery UI 可排序：如何更改“占位符”对象的外观？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2150002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI sortable: how can I change the appearance of the "placeholder" object?
提问by brahn
In the example given at http://jqueryui.com/demos/sortable/#placeholderthe placeholder is the orange box that appears when you drag any of the items.
在http://jqueryui.com/demos/sortable/#placeholder给出的示例中，占位符是拖动任何项目时出现的橙色框。
This element can be tweaked using the placeholderoption -- but it only lets you modify the class of the element as described here: http://jqueryui.com/demos/sortable/#options
可以使用placeholder选项调整此元素- 但它只允许您修改元素的类，如下所述：http: //jqueryui.com/demos/sortable/#options
I would like to customize this element more, e.g. by supplying a function to the placeholderoption in the same manner that one can supply a function to the helperoption.
我想更多地自定义这个元素，例如通过以与placeholder可以向选项提供功能相同的方式向helper选项提供功能。
What would I need to change (e.g. in sortable.js) to do this?
我需要改变什么（例如在 sortable.js 中）才能做到这一点？
回答by Alconja
Looking at the source for ui.sortable.js (1.7.2), you can cheat and set the placeholderto an object with a elementfunction and an updatefunction. The elementfunction is used to return the placeholder dom object and the updatefunction allows you to do things like correct its size (you can check out the _createPlaceholderfunction inside sortable if you want to see what the default implementation does).
查看 ui.sortable.js (1.7.2) 的源代码，您可以欺骗并将 设置为placeholder具有element函数和update函数的对象。该element函数用于返回占位符 dom 对象，该update函数允许您执行诸如更正其大小之类的操作（_createPlaceholder如果您想查看默认实现的功能，可以查看sortable 中的函数）。
So for example, the following will create a list item with the word testinside as your placeholder (note that it returns the actual dom object ([0]) and not the jQuery object itself):
因此，例如，以下内容将创建一个列表项，其中包含单词test作为占位符（请注意，它返回实际的 dom 对象 ( [0]) 而不是 jQuery 对象本身）：
$("#sortable").sortable({
placeholder: {
element: function(currentItem) {
return $("<li><em>test</em></li>")[0];
},
update: function(container, p) {
return;
}
}
});
If I'm reading source correctly, the elementfunction should be passed the current item (jQuery object) and thisshould point to the sortableitself (i.e. $("#sortable")in this instance). In updateyou're passed the "container" which is the object which holds all the options, & the element, etc & the placeholderitself.
如果我正确读取源代码，则该element函数应传递当前项（jQuery 对象）并this指向sortable自身（即$("#sortable")在此实例中）。在update您传递“容器”时，它是包含所有选项、元素等和placeholder自身的对象。
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.jsdirectly anyway.
请注意，这是一个未记录的 hack，因此它显然不受支持，并且可能会随着 jQuery UI 的下一个版本而改变......但它仍然可能对您有用，因为您ui.sortable.js无论如何都在谈论直接编辑。
Hope that helps.
希望有帮助。
回答by brahn
A more hackish approach that I found: one can use the startoption to modify the placeholder element, e.g. as follows
我发现了一种更hackish的方法：可以使用start选项来修改占位符元素，例如如下
$("#sortable").sortable({
start: function (e, ui) {
// modify ui.placeholder however you like
ui.placeholder.html("I'm modifying the placeholder element!");
}
});
