可编辑内容不 select 光标或双击

Question

我拖放了 table 个像这样的块：

$(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，您可以双击每个块并尝试编辑其内容。

问题出在正常的 editable 内容中，当您双击 select 所有内容时，您可以通过光标 select 内容的每个部分，但这里我只可以使用键盘删除内容。

我该如何解决这个问题？

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

可编辑内容不 select 光标或双击

editable content does not select by cursor or double click

html

javascript

css

jquery

jquery-ui