jQuery sortable from one div into another

Question

I have a bit of a problem with jQuery UI Sortable and would need some help: I have the following html code:

<div class="sortable">
 <div class="item">
    <p>title1</p>
    <div class="sort">sort 1</div>
 </div>
   <div class="item">
    <p>title2</p>
    <div class="sort">sort 2</div>
 </div>
   <div class="item">
    <p>title3</p>
    <div class="sort">sort 3</div>
 </div> 
</div>

There's a container with 3 divs. Each has a title and a defintion - the 3 definitions should be sortable, but the title above should always remain unchanged. Here's the js:

 $(".sortable").sortable({
     items: ".sort"
 });

If I specify in the sortable options to sort only the specified items, they are sorted, but taken out of the div structure I want - each inside one of the parent ".item" elements.

Here's a fiddle with the behaviour: http://jsfiddle.net/wPtjM/

Is there a way to achieve what I need with jQuery Sortable? All the examples I saw & tried lack such an outcome. Many thanks in advance!

Answer 1

Looking for something like this?

var dropped;
var titleDrop;
var titleChange;
$(function() {
    $(".sortable").sortable({
        items: ".sort",
        stop: function( event, ui ) {
            if(titleDrop != titleChange)
                dropped.append(ui.item);
        },
        change: function(event, ui){
            titleChange = ui.placeholder.parent().find('p').text();
        }
    });
    $( ".item" ).droppable({
        accept: ".sort",
        drop: function( event, ui ) {
            dropped = $(this);
            titleDrop = $(this).find('p').text();
        }
    });
});

FIDDLE

Update

Incorporates switching places:

FIDDLE2