jQuery UI 可排序和内容可编辑=true 不协同工作

jQuery UI sortable & contenteditable=true not working together

本文关键字：true 编辑 协同工作 UI 排序 jQuery      更新时间：2023-09-26

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

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

所以请建议我该怎么做？

我们可以利用 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>

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

最后我这样做了;

  1. 在鼠标按下事件中，我应用了sortable((，以便用户可以通过拖动元素对元素进行排序，

  2. 点击后，我销毁了可排序的.sortable("销毁"(。所以现在元素是可编辑的。

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

$('#ul_list').on("mousedown",function(){
    $("#ul_list").sortable();
});
相关文章：