jQuery UI sortable & contenteditable=true 不能一起工作答案

【问题标题】：jQuery UI sortable & contenteditable=true not working togetherjQuery UI sortable & contenteditable=true 不能一起工作
【发布时间】：2013-09-27 21:01:23
【问题描述】：

我正在创建一个列表并希望使其项目可排序和可编辑。所以我这样做：

<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 那么我的列表项将失去编辑焦点，这就是我无法编辑它们的原因。

所以请建议我该怎么做？

【问题讨论】：

stackoverflow.com/questions/2995329/… 给出了很好的解决方案~

标签： javascript jquery jquery-ui contenteditable

【解决方案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>

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

【讨论】：

【解决方案2】：

我终于做到了；

在 mousedown 事件中，我应用了 sortable()，以便用户可以通过拖动元素来对元素进行排序，
单击时我销毁了可排序的 .sortable("destroy")。所以现在元素是可编辑的。

【讨论】：

@afro360 好的，我会检查我的存储库并将代码发布在这里..这是一个旧代码，所以我需要找出来。

【解决方案3】：

我也有同样的问题，我用下面的代码解决了：

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

【讨论】：