可编辑内容不通过光标或双击选择答案

【问题标题】：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()直到内容编辑保存。
我已经尝试了那些...仍然无法正确实现...请您提供答案...

标签： javascript html jquery css jquery-ui

【解决方案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 或单击文本字段外，它将保存更改。

【讨论】：