jquery - セレクター $(':dragged') を使用して css を設定すると、ドラッグの動きがぎこちなくなるのはなぜですか?

Question

次のコードを使用して、ドラッグされている要素が、接続された並べ替え可能なリスト上にあるときに透明になるようにします。

$(':dragged').css({'opacity': 0.5});    

問題は、これを使用した後、ドラッグの動きが以前ほど滑らかではなくなり、カーソルがドラッグされている要素からずれることがあることです。

なぜこのようになっているのですか？どうすれば修正できますか？

Answer 1

コメントで述べたように、あなたのやり方では、オブジェクトがドラッグされている間、CSS が絶えず更新されます。

これは明らかに、最高のブラウザでさえカクつきます。

代わりに、不透明度の変更をdragイベントにバインドし、ドラッグが停止したときに再度設定することもできます。

$('.draggableClass').bind('drag',function( event ){
    $(this).css({'opacity': 0.5});
});
$('.draggableClass').bind('dragstop', function(event) {
    $(this).css({'opacity': 1.0});
});

この方法では、CSS の変更は、コードで発生するようにドラッグ中に毎分何百回も発生するのではなく、ドラッグの開始時に 1 回だけ発生し、終了時にもう一度発生します。

それが役立つことを願っています。