jQuery droppables - Change element on drop

Question

Hi all, I'm a bit new to jQuery and hope somebody can help me out.

I'm trying to change an element (li) to another element (div) after the (li) has been dropped.

Sample code:

$("#inputEl>li").draggable({ 
 revert: true, 
 opacity: 0.4,
 helper: "clone"
});
$("#dropEl")
 .droppable({ 
  accept: ".drag",
  hoverClass: "dropElhover",
  drop: function(ev, ui) {
   // change the li element to div here
  }
});

The problem is, when i use

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

the original draggable elements will be disabled when the function above is triggered.

I'm using the latest jQuery and jQuery UI stable versions.

Answer 1

So, what you want is to keep your original list intact and drop list items into dropEl? How about this:

drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

Or, if you want to replace the list elements with a div element and also have the div element draggable, you could try this:

drop: function(ev, ui) {
  $(ui.draggable).replaceWith("<div>Some content</div>");
  $("#inputEl>div").draggable({ 
   revert: true, 
   opacity: 0.4,
   helper: "clone"
  });
 }

The original draggable call only makes items draggable at the time it is called. If you change or add elements and want them to be draggable, you will need to call the draggable() function again.

Answer 2

Hi Ben, thanx for the reply.

Your first code worked, and plus I can also sort the divs in the droppable like this:

    drop: function(ev, ui) {
 $(this).append("<div>Some content</div>");
 $("#dropEl").sortable();
}

Now the problem is how do I know which list is which once I have changed it to divs?

I use the following code to get each element id:

drop: function(ev, ui) {
   revert: true;
   var this_id = $(ui.draggable).attr("id");
   $(this).append('<div id="'+this_id+'">Some content</div>');
   $("#dropEl").sortable();
  }