如何在使用jQuery UI进行拖放后启用拖动？

Question

在拖放区域后拖动不起作用。我用这个Jquery UI。我如何重新拖动按钮？我不想把它粘在一个特定的位置，这样我就可以将它重新放置在棋盘上的任何位置。

这里是链接http://www.onlinedemowebsite.com/design/swatch/drag-and-drop/

<script type="text/javascript"> 
$(document).ready(function(){ 
    for (var i = 1; i <= 225; i++) { 
     $('.board').append($('<div/>',{id:"cell_"+i})); 
    } 
    $('.board div').addClass('cellBox'); 
    $('.board .cellBox').append('<span>Drop</span>'); 

    $(".letters").draggable({ 
      revert: true, 
      snap:true, 
      snap: '.cellBox', snapMode: 'inner', snapTolerance:40, 
     }); 

    $(".board").droppable({ 
     activeClass: 'ui-state-hover', 
     hoverClass: 'ui-state-active', 

     over: function(event, ui) { 
      $('.ui-draggable-dragging').addClass('lettersBig'); 
     }, 
      out: function(event, ui) { 
      $('.ui-draggable-dragging').removeClass('lettersBig'); 
     }, 
     drop: function(event, ui) { 
      $('.ui-draggable-dragging').addClass('onCell'); 
      $(ui.draggable).draggable('enable'); 

      if (ui.draggable.is('.letters')) { 
      $(this).addClass('ui-state-highlight').find('span').html('got!'); 
      // cloning and appending prevents the revert animation from still occurring 
      ui.draggable.clone(true).css({position:relative,top:0,left:0}).appendTo($(this)); 
      ui.draggable.remove(); 

      } else { 
      $('.cellBox > span').html('No!') 
       setTimeout(function(){ $('.cellBox > span').html('Drop'); }, 1000); 

      } 
     } 

    }); 

}）

的HTML代码如下

<div class="container"> 
<div class="board"> 
</div> 
<!--/board--> 

<div class="lettersContainer"> 
    <div class="letters"> 
     <span>A</span> 
    </div> 
    <!--/letters--> 

    <div class="letters correct"> 
     <span>X</span> 
    </div> 
    <!--/letters--> 

    <div class="letters"> 
     <span>M</span> 
    </div> 
    <!--/letters--> 
</div> 
<!--/lettersContainer--> 

Answer 1

我想你是不是做的项目可拖动后丢下一个第二附加

drop: function(event, ui) { 
     $('.ui-draggable-dragging').addClass('onCell'); 
     $(ui.draggable).draggable({ 
      revert: true, 
      snap:true, 
      snap: '.cellBox', snapMode: 'inner', snapTolerance:40, 
     }); 

     if (ui.draggable.is('.letters')) { 
     $(this).addClass('ui-state-highlight').find('span').html('got!'); 
     // cloning and appending prevents the revert animation from still occurring 
     ui.draggable.clone(true).css({position:relative,top:0,left:0}).appendTo($(this)); 
     ui.draggable.remove(); 

     } else { 
     $('.cellBox > span').html('No!') 
      setTimeout(function(){ $('.cellBox > span').html('Drop'); }, 1000); 

     } 
    } 

//编辑

$(".board").droppable({ 
     activeClass: 'ui-state-hover', 
     hoverClass: 'ui-state-active', 

     over: function(event, ui) { 
      $('.ui-draggable-dragging').addClass('lettersBig'); 
     }, 
      out: function(event, ui) { 
      $('.ui-draggable-dragging').removeClass('lettersBig'); 
     }, 
     drop: function(event, ui) { 
      $('.ui-draggable-dragging').addClass('onCell'); 
      $(ui.draggable).draggable('destroy'); 

      if (ui.draggable.is('.letters')) { 
      $(this).addClass('ui-state-highlight').find('.cellBox').html('got!'); 
      // cloning and appending prevents the revert animation from still occurring 
      var objectClone = $(ui.draggable).clone(); 
      $(objectClone).css('position','relative').position({top:0,left:0}); 
      $(objectClone).draggable({ 
       revert: true, 
       snap:true, 
       snap: '.cellBox', snapMode: 'inner', snapTolerance:40, 
      }); 
      $(this).append($(objectClone)); 
      ui.draggable.remove(); 

      } else { 
      $('.cellBox > span').html('No!') 
       setTimeout(function(){ $('.cellBox > span').html('Drop'); }, 1000); 

      } 
     } 

    }); 

我已经改变可投放功能一点点。它有一些小故障，但尝试一次，看看自己