仅在动画后将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; 
  });
});