Сортируемый пользовательский интерфейс jquery: как изменить внешний вид объекта-заполнителя?

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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