jQuery UI 可排序 & contenteditable=true

Question

我正在使用 jquery sortable 和 contenteditable 问题是当我使用 jquery sortable 时 contenteditable 不起作用所以我已经在 stackoverflow 上搜索了我得到了解决方案但是当我现在实现它时，问题出在 mousedown 事件上，可排序是不工作。

我在做什么。

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>

首先我使用这个代码

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

我第二次使用这段代码

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

Answer 1

将onmousedown 更改为mousedown

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

同样在 p 的点击事件上销毁 sortable

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

http://jsfiddle.net/fum9sf2m/

Answer 2

$(window).on('mouseup','.sortable',function(){
     $( ".sortable" ).sortable( "destroy" );
}