如何突出顯示拖放前可排序的潛在拖放區域？

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; 
}