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

Question

我正在使用 JQuery 的 Sortable（不是 Draggable 或 Droppable），我想知道如何在用户开始排序时突出显示可能的放置区域（使用 CSS）。类似于：

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

但是需要突出显示可以放置物品的区域。

- Rio

Answer 1

使用“Placeholder”选项来定义一个CSS类，以应用于默认的空白处。

  placeholder: 'someClass'

示例 在这里

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

快速演示在这里

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

- redsquare

---

你们俩都很有帮助，但是你的回答更加深入和有用。再次感谢你 - 有时候最简单的答案是最难看到的。 - Rio

Answer 2

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

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

- Yinnette Olivo

Answer 3

redsquare的内联CSS样式对我有效，但我无法使用自定义CSS类使其工作。 更新配置中的jQuery placeHolder类为我带来了一些奇怪的问题。

您可以使用以下CSS而无需其他配置更新即可获得所需的结果。请注意，！important在可见性上是必要的。

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

- contactmatt