Как выделить области потенциального падения в сортируемом до падения?

Question

Я использую JQuery Sortable (не Draggable или Droppable), и мне было интересно, как я могу выделить потенциальные области перетаскивания (с помощью CSS), которые есть у пользователя, когда пользователь начал сортировку. Что-то вроде

http://www.shopdev.co.uk/blog/sortables.html

, но с выделением области, в которую можно уронить предмет.

Answer 1

Используйте опцию Placeholder, чтобы определить класс css для применения к пустому пространству по умолчанию

  placeholder: 'someClass'

Демо здесь

Вы также можете использовать событие изменения и переопределить скрытую встроенную видимость, которую сортируемый объект применяет к заполнителю.

Смотрите быструю демонстрацию здесь

$("#sortable").sortable({
    change: function(event, ui) {
      ui.placeholder.css({visibility: 'visible', border : '1px solid yellow'});
    }
});

Answer 2

Укажите класс с большим количеством классов для переопределения встроенного стиля:

.ui-sortable-placeholder.ui-sortable-handle {
    border: 1px solid blue;
    visibility: visible!important;
}

Answer 3

встроенный CSS-стиль redsquare при изменении работал для меня, но я не мог заставить его работать, используя собственный класс CSS. Обновление класса jQuery placeHolder в конфигурации вызвало у меня некоторые странности.

Вы можете использовать следующий CSS без других обновлений конфигурации, чтобы получить желаемый результат. Обратите внимание, что !important необходимо на видимости.

.ui-sortable-placeholder {
    border: 1px solid rgb(12,194,170);
    visibility:visible !important;
}