jquery-ui - 在 JQuery Sortable 中，如何在恢复动画开始之前运行函数？

Question

JQuery 可排序片段示例:

 $("#sortable").sortable({ 
     start: function(){ $('#overlay').show('fast'); });
     stop: function(){ $('#overlay').hide('fast'); });
     revert: true;
 });

我希望我的叠加层至少在恢复动画开始之前开始隐藏，因为否则感觉很慢。有什么想法吗？

Answer 1

不幸的是，恢复动画是在内部 _clear() 函数执行之前执行的，该函数会触发 beforeStop 和 stop 事件。

一个可能的解决方法是为revert选项提供一个数字而不是 bool 值。来自 documentation :

If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.

所以你可以设置一个较小的恢复动画持续时间，例如150ms，这样看起来就不会太慢:

$("#sortable").sortable({ 
     start: function(){ $('#overlay').show('fast'); },
     stop: function(){ $('#overlay').hide('fast'); },
     revert: 150
});

作为补充，您可以通过定义 one-time mouseup event 来替换 stop 事件。当您开始拖动时，在助手上，您将开始隐藏您的 #overlay 元素。一旦释放鼠标按钮，处理程序就会与恢复动画一起执行:

$("#sortable").sortable({ 
     start: function(){
         // set a one-time "mouseup" event on the helper
         $(ui.helper).one('mouseup', function() {
             // when mouse button is released, "#overlay" will start hiding
             // along with reverting animation
             $('#overlay').hide('fast');
         });
         $('#overlay').show('fast'); 
     },
     revert: 150
});

<强> DEMO