为什么使用selector $（'：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更改将仅在拖动开始时发生一次，在完成时再发生一次，而不是在拖动过程中每分钟发生数百次，就像代码一样。

希望有所帮助。