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屋！