Имеется следующая структура
<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 делаем дропбл, а когда положили его то это место делаем драггабл. Все бы ничего, но свободное место не определяется, на котором был элемент и элемент заново не можем взять. Будто бы надо скрипт перезапустить после каждого изменения. в чем проблема?
