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();
});