JQuery UI sortable: как я могу изменить внешний вид объекта "placeholder"?

В примере, приведенном в http://jqueryui.com/demos/sortable/#placeholder, placeholder - это оранжевый поле, которое появляется при перетаскивании любого из элементов.

Этот элемент может быть изменен с помощью параметра placeholder - но он только позволяет вам изменить класс элемента, как описано здесь: http://jqueryui.com/demos/sortable/#options

Я хотел бы настроить этот элемент больше, например. путем предоставления функции опции placeholder таким же образом, что можно предоставить функцию опции helper.

Что мне нужно изменить (например, в sortable.js), чтобы сделать это?

Ответы

Ответ 1

Глядя на источник для ui.sortable.js(1.7.2), вы можете обмануть и установить placeholder объекту с помощью функции element и функции update. Функция element используется для возврата объекта domholder dom, а функция update позволяет делать такие вещи, как исправление их размера (вы можете проверить функцию _createPlaceholder внутри сортируемой, если вы хотите увидеть, что делает реализация по умолчанию).

Итак, например, следующее создаст элемент списка со словом test внутри как ваш placeholder (обратите внимание, что он возвращает фактический 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 в любом случае.

Надеюсь, что это поможет.

Ответ 2

Более хакерский подход, который я нашел: можно использовать параметр start для изменения элемента-заполнителя, например. следующим образом

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