Question

Drag is not working after dropping on the area. I have used Jquery UI for this. How do I re drag the buttons? I dont want to to stick it in a particular position so that i can reposition it any where on the board.

Here is the link 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);

           }
        }

    });

})

the HTML code is following

<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

I think you are not making the item draggable after dropping and appending

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);

       }
    }

//edited

$( ".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);

           }
        }

    });

i have changed the droppable function a little bit. It has some glitches but try it once and see yourself