Как включить перетаскивание после его удаления с помощью 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); 

      } 
     } 

    }); 

Я изменил Droppable функции немного. У него есть некоторые сбои, но попробуйте один раз и посмотрите сами