Javascript 可编辑内容不通过光标或双击进行选择

我有一个块的拖放表，如下所示：

$（文档）.ready（函数（e）{
$（“.sortable”）.sortable({
connectWith:“.sortable”//使用此选项连接其他uls
});
$（“.sortable”）.disableSelection（）；
$（“#btn”）。在（“单击”，函数（）{
常量位置=[]；
var计数=0；
//获取所有可排序类的长度
变量长度=$（“.sortable”）.length；
//如果计数小于长度，则检查
while（计数<长度）{
//创建空arry
数据=[]
//loop thorugh uls..li
$（“ul:eq（“+count+”）li”）。每个（函数（索引，元素）{
data.push（$（this.text（））//在数组中推送数据
});
positions.push（data）//外部数组中的push数据
计数+++；//增量
}
控制台日志（位置）
});
$（'.ui状态默认值'）.dblclick（函数（事件）{
$this=$（this）；
$this.attr（'contenteditable'，'true'）；
$this.blur（）；
$this.focus（）；
});
});
.sortable{
显示器：flex；
弯曲方向：立柱；
}
sortit先生{
显示器：flex；
弯曲方向：行；
}
.可排序{
保证金：0；
填充：0；
宽度：20%；
}
李先生{
保证金：0 3px 3px 3px；
填充：20px；
用户选择：文本；
字体大小：2vw；
高度：18px；
背景：gainsboro；
列表样式类型：无；
}
.可排序的li span{
位置：绝对位置；
}

使用拖放对列表进行排序

第1项
第2项
第3项
第4项


第5项
第6项
第7项


第8项
第9项
第10项


第11项
第12项
第13项
第14项

拖放列表以重新定位

获取位置并将其保存到数组中
考虑以下几点


$（函数（e）{
功能启用编辑（e）{
var$this=$（e.target）；
$this.closest（“.ui可排序”）.enableSelection（）；
var cnt=$this.text（）；
$this.off（“dblclick”）
.addClass（“编辑”）；
变量inp=$（“”{
val:cnt
}).css({
宽度：“60px”，
marginTop:“-10px”
});
$this.html（inp）；
$this.find（“输入”）.focus（）；
}
函数prepareEdits（o）{
o、 dblclick（启用编辑）；
$（文档）。单击（单击关闭）；
$（“.sortit”）。在（“键控键控”、“编辑>输入”功能上（e）{
如果（e.key=='输入'| | e.keyCode===13）{
$（文档）。单击（）；
}
});
}
功能禁用编辑（o）{
o、 最近（“.ui可排序”）.disableSelection（）；
o、 removeClass（“编辑”）；
准备ITS（o）；
}
功能点击关闭（e）{
if（$（e.target）.hasClass（“编辑”）| |$（e.target）.parent（）.hasClass（“编辑”））{
返回；
}
var$this=$（“.editing”）；
var cnt=$this.find（“输入”）.val（）；
$this.html（“+cnt”）；
禁用编辑（$this）；
}
prepareEdits（$（'.ui状态默认值'）；
$（“.sortable”）.sortable({
connectWith:“.sortable”//使用此选项连接其他uls
});
$（“.sortable”）.disableSelection（）；
$（“#btn”）。在（“单击”，函数（）{
常量位置=[]；
var计数=0；
//获取所有可排序类的长度
变量长度=$（“.sortable”）.length；
//如果计数小于长度，则检查
while（计数<长度）{
//创建空arry
数据=[]
//loop thorugh uls..li
$（“ul:eq（“+count+”）li”）。每个（函数（索引，元素）{
data.push（$（this.text（））//在数组中推送数据
});
positions.push（data）//外部数组中的push数据
计数+++；//增量
}
控制台日志（位置）
});
});
.sortit{
显示器：flex；
弯曲方向：行；
}
.可排序{
显示器：flex；
弯曲方向：立柱；
保证金：0；
填充：0；
宽度：20%；
}
李先生{
保证金：0 3px 3px 3px；
填充：20px；
用户选择：文本；
字体大小：2vw；
高度：18px；
背景：gainsboro；
列表样式类型：无；
}
.可排序的li.编辑{
背景色：卡德蓝；
颜色：仿古白色；
}
.可排序的li span{
位置：绝对位置；
左边距：-17px；
}

使用拖放对列表进行排序

第1项
第2项
第3项
第4项


第5项
第6项
第7项


第8项
第9项
第10项


第11项
第12项
第13项
第14项

拖放列表以重新定位

获取位置并将其保存到数组中
Sortable句柄在可编辑页面的焦点上冒泡。因此，当您单击并拖动以突出显示或尝试双击以突出显示时，最终会触发其他回调。我建议您为每个项目添加句柄