jQuery UI可排序＆amp; contenteditable = true不合作

Question

我正在创建一个列表＆amp;想让它的项目可排序和可编辑。所以我这样做：

<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

最后我这样做了;

1. 在mousedown事件中，我应用了sortable（），以便用户可以通过拖动来对元素进行排序，

2. 点击后我销毁了sortable .sortable（“destroy”）。所以现在元素是可编辑的。

Answer 2

我们可以使用jquery sortable提供的取消选项

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

单击文本将使其可编辑。可以通过点击其他任何地方进行排序

Answer 3

我也有同样的问题，我修改了以下代码：

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