Use draggable & droppable in a table

Use draggable & droppable in a table

Hi all,
I'm trying to use draggable and droppable methods in a personnal website but having some problems...
My objective is to move content of a cell to an other cell as many times i want...

For now I can move this content, drop it  to an other cell, move the new content but i can't drop it again anywhere...

Each cell look like this :
  1. <td>
        <div class="cell ui-droppable ui-sortable">
            <div class="postit ui-draggable">
                THIS TEXT CAN BE MOVED
            </div>
        </div>
    </td>







My script (inspired from Jquery UI examples)
  1. <script>
    $(function() {
        $( ".postit" ).draggable({
            appendTo: "body",
            revert: "invalid",
            helper: "clone",
            cursor: "move"
        });
       
        $( ".cell" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            //accept: ".postit"
            drop: function( event, ui ) {
                $( this ).find( ".cell" ).remove();
                $( '<div class="postit ui-draggable"></div>' ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: ".postit:not(.cell)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
       
    });
    </script>




























Some can help me ?


I apologize for my poor english.