javascriptjqueryjquery-uidraggabledroppable

jQuery-UI draggable and droppable items become non draggable

I have 2 divs: #leftDiv and #mainDiv. #leftDiv contains some list items, which are draggable and droppable into #mainDiv, but there is one problem, after drop elements in the #mainDiv become non draggable. What can I do with this? Here is my script:

$(document).ready(function(){
  $('#output li').draggable({
    helper: 'clone',
    revert: 'invalid'
  });
  $('#mainDiv').droppable({
    drop: function(event, ui){
      var item = $('<div class="foo">').append(ui.draggable.text());
      $(this).append(item);
    }
  });
  $(".foo").draggable();
});

I want to make elements in #mainDiv draggable and droppable to any place user wants.

Solution

  • You are creating new foos that by default are not draggable. You need to make them:

    item.draggable();
$(this).append(item).