jQuery UI sortable & contenteditable=true

Question

I am using jquery sortable and contenteditable the problem is when I am using jquery sortable the contenteditable is not working so I have searched on stackoverflow I have got the solution but when I implemented it now the problem is on mousedown event the sortable is not working.

What am I doing worng.

Here is the stackoverflow link

<div class="sortable">
  <div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;">
    <p contenteditable="true" style="padding: 5px;">Add your text here.</p>  </div>
    <div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;">
    <p contenteditable="true" style="padding: 5px;">Add your text here.</p>  </div>
    <div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;">
    <p contenteditable="true" style="padding: 5px;">Add your text here.</p>  </div>
</div>

First I am using this code

$('.sortable').sortable();

Second I am using this code

$('.sortable').on('onmousedown', function() {
        $(".sortable").sortable({
            cursor: 'move'
        });
    })

Answer 1

change onmousedown to mousedown

$('.sortable').on('mousedown', function() {
    $(".sortable").sortable({
        cursor: 'move'
    });
})

Also on the click event of p destroy the sortable

 $('p').on('click', function() {
    $( ".sortable" ).sortable( "destroy" );
});

http://jsfiddle.net/fum9sf2m/