Editable Content Does Not Select By Cursor Or Double Click

I have a drag and drop table of blocks like this: As you see I've attached an event handler to each li and you can double click on each block and try to edit the content of it. Th

Solution 1:

Consider the following.

$(function(e) {
  functionenableEdit(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();
  }

  functionprepareEdits(o) {
    o.dblclick(enableEdit);
    $(document).click(clickOff);
    $(".sortit").on("keyup", ".editing > input", function(e) {
      if (e.key === 'Enter' || e.keyCode === 13) {
        $(document).click();
      }
    });
  }

  functiondisableEdit(o) {
    o.closest(".ui-sortable").disableSelection();
    o.removeClass("editing");
    prepareEdits(o);
  }

  functionclickOff(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 classvar length = $(".sortable").length;
    //chck if count is less then lengthwhile (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%;
}

.sortableli {
  margin: 03px3px3px;
  padding: 20px;
  user-select: text;
  font-size: 2vw;
  height: 18px;
  background: gainsboro;
  list-style-type: none;
}

.sortableli.editing {
  background-color: CadetBlue;
  color: AntiqueWhite;
}

.sortablelispan {
  position: absolute;
  margin-left: -17px;
}

<linkrel="stylesheet"href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><h1>Sort listing using drag & drop</h1><divclass="sortit"><ulclass="sortable"><liclass="ui-state-default"id="1"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><liclass="ui-state-default"id="2"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><liclass="ui-state-default"id="3"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><liclass="ui-state-default"id="4"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li></ul><ulclass="sortable"><liclass="ui-state-default"id="5"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><liclass="ui-state-default"id="6"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><liclass="ui-state-default"id="7"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li></ul><ulclass="sortable"><liclass="ui-state-default"id="8"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li><liclass="ui-state-default"id="9"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li><liclass="ui-state-default"id="10"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li></ul><ulclass="sortable"><liclass="ui-state-default"id="11"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li><liclass="ui-state-default"id="12"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li><liclass="ui-state-default"id="13"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li><liclass="ui-state-default"id="14"><spanclass="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li></ul></div><p>Drag and drop list to reposition...</p><buttonid="btn">Get positions and save them into an array of arrays</button><divclass="show"></div>

Instead of using Content Edit, can easily replace the item with a Text Field. This will give you better manipulation of the text. Here you can see where a double click event will enable editing. The user can then highlight or click in the text field as needed. If they hit Enter or click out of the text field, it will save the changes.