ドロップ前にソート可能な潜在的なドロップ領域を強調表示するにはどうすればいいですか？

Question

私はJQueryのSortable（DraggableまたはDroppableではない）を使用しています。ユーザーがソートを開始したときに潜在的なドロップ領域（CSSを使用）をどのように強調表示できるのだろうかと思いました。

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

が、アイテムをドロップできる領域を強調してのようなもの。

Answer 1

デフォルトの空白に適用する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; 
}