jquery-animate - 仅在动画后将 DIV 设置为可拖动

Question

再次遇到问题：

我希望我的#deck DIV 在动画之后可以拖动，当然之前完全不能。我现在明白代码不遵循指令顺序，因为我的 DIV 可以直接拖动，即使我将它放在整个动画函数之后。我如何强制它只有在它到达它的位置后才可以拖动？

$(function (){
  $('#deck').click(function (){
    var slotPos = $('#slot1').position();
    var hand = $("#hand").position(); 
    $(this).animate({
      left: 10+hand.left+slotPos.left,
      top:10 + hand.top}, 400);
    slot1 = true; 
  });
  $('#deck').draggable();
});

为什么这不起作用？

http://jsbin.com/ejeweb/5/

谢谢！

Answer 1

Animate函数是异步的。您需要在回调中创建您的可拖动对象。

更新：我已经修复了一些 CSS 问题。http://jsbin.com/ugicuy/1/

$(function (){
  $('#deck').click(function (){
    var slotPos = $('#slot1').position();
    var hand = $("#hand").position(); 
    var self = this;

    $(this).animate({
      left: 10+hand.left+slotPos.left,
      top:10 + hand.top}, 400,function(){
         if($(self).hasClass('ui-draggable') === false)
            $(self).draggable();
      });
    slot1 = true; 
  });
});