Drag and Drop
 

Имеется следующая структура

<ul>
<li><div class ='class1'><div class ='info draggable'>bla bla</div></div></li>
<li><div class ='class1'><div class ='info droppable'></div></div></li>
<li><div class ='class1'><div class ='info draggable'>bla bla</div></div></li>
<li><div class ='class1'><div class ='info draggable'>bla bla</div></div></li>
<li><div class ='class1'><div class ='info droppable'></div></div></li>
<li><div class ='class1'><div class ='info droppable'></div></div></li>
</ul>

то есть если есть в списке текст, то он драггабл, если пустое место то дроппбл. Мне нужно перемещать текст по пустым местам. И когда текст переместиться у него должно быть пустое место, в которое можно будет либо переместить его обратно или другой текст.

$(function() {
        $(".draggable").draggable({
        	drag: function( event, ui )
            {
            	$(this).removeClass('draggable ui-draggable').addClass('droppable');
            }
        });

        $(".droppable").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop: function( event, ui )
            {
            	alert(ui.draggable.text());
                $(this).html(ui.draggable.html());
                ui.draggable.html('');
                ui.draggable.css({'top' : '', 'left' : '', 'position': ''});
                $(this).addClass('draggable').removeClass('ui-droppable droppable');
                $(this).css({'position': 'relative'});
            }
        });
    });

В скрипте прописываю что когда элемент мы взяли , его div делаем дропбл, а когда положили его то это место делаем драггабл. Все бы ничего, но свободное место не определяется, на котором был элемент и элемент заново не можем взять. Будто бы надо скрипт перезапустить после каждого изменения. в чем проблема?