为啥使用选择器 $(':dragged') 设置 css 会使拖动动作尴尬？

Posted 2023-05-09

【中文标题】为啥使用选择器 $(\':dragged\') 设置 css 会使拖动动作尴尬？

【英文标题】：Why set css by using selector $(':dragged') makes the dragging movement awkward?为什么使用选择器 $(':dragged') 设置 css 会使拖动动作尴尬？

【发布时间】：2012-07-29 15:54:30

【问题描述】：

我使用以下代码使被拖动的元素在连接的可排序列表上方时变为透明。

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

问题是，使用这个之后，拖拽的动作没有之前那么流畅，而且光标有时会偏离被拖拽的元素。

为什么会这样？我该如何解决？

【问题讨论】：

只是一个理论，但也许每次鼠标移动都会触发 ":dragged" 事件，这会使事情变慢。另一种方法可能是在最初拖动元素时设置不透明度，然后在放下元素时将其关闭。

您是否尝试过使用可拖动的不透明度选项？ api.jqueryui.com/draggable/#option-opacity

【参考方案1】：

如 cmets 中所述，您执行此操作的方式将导致 CSS 在拖动对象时不断更新。

这显然会导致即使是最好的浏览器也卡顿。

您可能想要做的是将不透明度更改绑定到drag 事件，然后在停止拖动时将其重新设置：

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

这样，CSS 更改只会在拖动开始时发生一次，并在完成时再发生一次，而不是像您的代码那样在拖动期间每分钟发生数百次。

希望对您有所帮助。

【讨论】：

谢谢！但是将 'drag' 与 '.draggableClass' 绑定会将整个可拖动元素列表变为不透明。我想要的效果只是被拖动为透明的一个元素。这就是我考虑使用':dragged'的原因。 BTW，这两种方法实际上使得每个元素只能拖动一次。