javascript - jQuery UI sortable & contenteditable=true が連携しない

Question

リストを作成していて、そのアイテムをソート可能および編集可能にしたいと考えています。だから私はこのようにやっています：

<ul id="ul_list">
<li><span contenteditable="true">A</span></li>
<li><span contenteditable="true">B</span></li>
<li><span contenteditable="true">C</span></li>
</ul>

$("#ul_list").sortable();

http://jsfiddle.net/7jzVa/

しかし、jquery ui sortable を使用すると、リスト項目が編集のためにフォーカスを失い、編集できなくなります。

どうすればこれを行うことができますか？

Answer 1

jquery sortable が提供するキャンセルオプションを利用できます

$("#ul_list").sortable({cancel: 'span'});

#ul_list li{
    border:1px solid red;
    list-style-type:none;
}

<ul id="ul_list">
<li><span contenteditable="true">A</span></li>
<li><span contenteditable="true">B</span></li>
<li><span contenteditable="true">C</span></li>
</ul>

テキストをクリックすると、編集可能になります。他の場所をクリックしてソートできます

Answer 2

最後に、私はこのようにしました。

1. mousedown イベントで、ユーザーが要素をドラッグしてソートできるように sortable() を適用しました。

2. クリックすると、ソート可能な .sortable("destroy") を破棄しました。これで要素が編集可能になりました。

Answer 3

私も同じ問題を抱えており、次のコードで修正しました。

$('#ul_list').on("mousedown",function(){
    $("#ul_list").sortable();
});