如何在下降之前突出显示可排序的潜在下降区域？

Question

我正在使用JQuery的Sortable（不是Draggable或Droppable），我想知道如何突出用户开始排序时用户拥有的潜在丢弃区域（使用CSS）。像

这样的东西

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

但突出显示可以删除项目的区域。

Answer 1

使用Placeholder选项定义要应用于默认空白区域的css类

  placeholder: 'someClass'

演示here

您还可以使用更改事件并覆盖可排序应用于占位符的隐藏的内联可见性。

请参阅快速演示here

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

Answer 2

redsquare的内联CSS样式对我来说很有用，但是我无法使用自定义CSS类来实现它。更新配置中的jQuery placeHolder类给我带来了一些奇怪的东西。

您可以使用以下CSS而无需其他配置更新来获得所需的结果。请注意，可见性需要!important。

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

Answer 3

指定具有更多类的类以覆盖内联样式：

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