javascript - 使 p 元素既可编辑内容又可排序 JQuery UI

Question

是否可以使 p 元素既可编辑内容又可排序 JQuery UI？

在我下面的简单示例中，p 元素是可排序的，但您不能编辑它们的文本。有没有办法克服这个问题？

请注意，我已尝试将 p 嵌套在容器中，以便容器可排序且 p 可编辑，但我仍然无法编辑内部 p。

$(document).ready(function() {
  	$( ".elements" ).sortable({
	   connectWith: ".elements"
	});
});

p {
	height: 100px;
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script>

<div class="elements">
	<p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p>
	
	<!-- Even if I nest p's in a container they still are not editable -->
	<div class="test-container">
		<p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p>
	</div>
</div>

Answer 1

通过随机尝试让它工作，我发现将焦点设置在元素上，然后将光标移动到可编辑内容的末尾(如 here 所示 Nico Burns )足以获得内容可编辑工作。

我的猜测是，由于某种 event.preventDefault 或 cancelBubble，sortable 阻止了可编辑的内容获得焦点。

$(document).ready(function() {
  $(".elements").sortable({
    connectWith: ".elements"
  });

  $(".elements p").on("click", function(e) {
    $(this).focus();
    setEndOfContenteditable(e.target);
  });
});

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+
  {
    range = document.createRange(); //Create a range (a range is a like the selection but invisible)
    range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
    selection = window.getSelection(); //get the selection object (allows you to change selection)
    selection.removeAllRanges(); //remove any selections already made
    selection.addRange(range); //make the range you have just created the visible selection
  } else if (document.selection) //IE 8 and lower
  {
    range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
    range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
    range.select(); //Select the range (make it the visible selection
  }
}

p {
  height: 50px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script>

<div class="elements">
  <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p>

  <div>
    <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p>
  </div>
</div>