Question

This seems to be trivial but here I am anyway. The code below is a simple drag a drop with a sortable list. What i would like to do is do some work on the dropped in element. In this example the dropped in item is a div. The work I would like to do is create a new list item with the div inside.

Any help?

<script>
$(function(){
    $(".sortable").sortable();
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
    }); 
}
</script>
<div class="draggable">DRAG ME</div>
<ul class="sortable">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
</ul>

here is some stuff I also tried

<script>
$(function(){
    $(".sortable").sortable({
        receive: function(event, ui) { 
            ui.item = $("<li></li>").append(ui.item);
        }
    });

    $('.sortable').droppable({
        drop: function(event, ui){
            ui.draggable = $("<li></li>").append(ui.draggable);
        }
    });
}
</script>

Answer 1

You need to use the stop event on the Sortable:

$(".sortable").sortable({
   stop: function(event, ui)
   {
      if (ui.item.is('div.draggable'))
         ui.item.replaceWith($('<li>' + ui.item.text() + '</li>'));
   }
});

Reference for learning: stop event

A similar question that helped with finding the answer: Using jQuery UI drag-and-drop: changing the dragged element on drop