可编辑内容不通过光标或双击选择
Posted
技术标签:
【中文标题】可编辑内容不通过光标或双击选择【英文标题】：editable content does not select by cursor or double click 【发布时间】：2021-01-23 16:50:10 【问题描述】：我有一个这样的块拖放表：
$(document).ready(function(e)
$(".sortable").sortable(
connectWith: ".sortable"//use this to connect with other uls
);
$(".sortable").disableSelection();
$("#btn").on("click", function()
const positions = [];
var count = 0;
//get length of all sortable class
var length = $(".sortable").length;
//chck if count is less then length
while (count < length)
//create empty arry
data = []
//loop thorugh uls .. li
$("ul:eq(" + count + ") li").each(function(index, element)
data.push($(this).text())//push data in array
);
positions.push(data)//push datas in outer array
count++;//increment
console.log(positions)
);
$('.ui-state-default').dblclick(function(event)
$this = $(this);
$this.attr('contenteditable', "true");
$this.blur();
$this.focus();
);
);.sortable
display: flex;
flex-direction: column;
.sortit
display: flex;
flex-direction: row;
.sortable
margin: 0;
padding: 0;
width: 20%;
.sortable li
margin: 0 3px 3px 3px;
padding: 20px;
user-select:text;
font-size: 2vw;
height: 18px;
background: gainsboro;
list-style-type: none;
.sortable li span
position: absolute;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<h1>Sort listing using drag & drop</h1>
<div class="sortit">
<ul class="sortable">
<li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="8"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
<li class="ui-state-default" id="9"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
<li class="ui-state-default" id="10"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="11"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
<li class="ui-state-default" id="12"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
<li class="ui-state-default" id="13"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
<li class="ui-state-default" id="14"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
</ul>
</div>
<p>Drag and drop list to reposition...</p>
<button id="btn">Get positions and save them into an array of arrays</button>
<div class="show"></div>
<script src="script.js"></script>
</body>
</html>如您所见，我为每个 li 附加了一个事件处理程序，您可以双击每个块并尝试编辑它的内容。
问题在于正常的可编辑内容，当您双击选择所有内容时，您可以通过光标选择内容的每个部分，但这里我只能使用键盘删除内容。
我该如何解决这个问题？
【问题讨论】：
Sortable 句柄在可编辑的焦点上冒泡。因此，当您单击并拖动以突出显示或尝试双击以突出显示时，最终会触发其他回调。我建议您为每个项目添加句柄以进行排序，并且可能考虑移动到编辑按钮而不是双击。或者转双击,off()直到内容编辑保存。
我已经尝试了那些...仍然无法正确实现...请您提供答案...
【参考方案1】：
考虑以下内容。
$(function(e)
function enableEdit(e)
var $this = $(e.target);
$this.closest(".ui-sortable").enableSelection();
var cnt = $this.text();
$this.off("dblclick")
.addClass("editing");
var inp = $("<input>",
val: cnt
).css(
width: "60px",
marginTop: "-10px"
);
$this.html(inp);
$this.find("input").focus();
function prepareEdits(o)
o.dblclick(enableEdit);
$(document).click(clickOff);
$(".sortit").on("keyup", ".editing > input", function(e)
if (e.key === 'Enter' || e.keyCode === 13)
$(document).click();
);
function disableEdit(o)
o.closest(".ui-sortable").disableSelection();
o.removeClass("editing");
prepareEdits(o);
function clickOff(e)
if ($(e.target).hasClass("editing") || $(e.target).parent().hasClass("editing"))
return;
var $this = $(".editing");
var cnt = $this.find("input").val();
$this.html("<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>" + cnt);
disableEdit($this);
prepareEdits($('.ui-state-default'));
$(".sortable").sortable(
connectWith: ".sortable" //use this to connect with other uls
);
$(".sortable").disableSelection();
$("#btn").on("click", function()
const positions = [];
var count = 0;
//get length of all sortable class
var length = $(".sortable").length;
//chck if count is less then length
while (count < length)
//create empty arry
data = []
//loop thorugh uls .. li
$("ul:eq(" + count + ") li").each(function(index, element)
data.push($(this).text()) //push data in array
);
positions.push(data) //push datas in outer array
count++; //increment
console.log(positions)
);
);.sortit
display: flex;
flex-direction: row;
.sortable
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 20%;
.sortable li
margin: 0 3px 3px 3px;
padding: 20px;
user-select: text;
font-size: 2vw;
height: 18px;
background: gainsboro;
list-style-type: none;
.sortable li.editing
background-color: CadetBlue;
color: AntiqueWhite;
.sortable li span
position: absolute;
margin-left: -17px;
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<h1>Sort listing using drag & drop</h1>
<div class="sortit">
<ul class="sortable">
<li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="8"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
<li class="ui-state-default" id="9"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
<li class="ui-state-default" id="10"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="11"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
<li class="ui-state-default" id="12"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
<li class="ui-state-default" id="13"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
<li class="ui-state-default" id="14"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
</ul>
</div>
<p>Drag and drop list to reposition...</p>
<button id="btn">Get positions and save them into an array of arrays</button>
<div class="show"></div>代替使用内容编辑，可以轻松地将项目替换为文本字段。这将使您更好地处理文本。在这里，您可以看到双击事件将启用编辑的位置。然后，用户可以根据需要突出显示或单击文本字段。如果他们按 Enter 或单击文本字段外，它将保存更改。
【讨论】：
以上是关于可编辑内容不通过光标或双击选择的主要内容，如果未能解决你的问题，请参考以下文章