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

Question

我正在使用JQuery的Sortable（不可拖拽或拖放），我想知道如何突出显示用户在用户开始排序时可能出现的拖放区域（使用CSS）。喜欢的东西

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

但强调在该项目的放置区域。

Answer 1

使用占位符选项来定义一个CSS类应用到默认的白色空间

placeholder: 'someClass' 

演示here

您还可以使用change事件，并覆盖内嵌可见性隐藏的排序应用到占位符。

见快速演示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; 
}