javascript - Make a p element both content editable and JQuery UI Sortable -

is possible make p element both content editable , jquery ui sortable?

in simple example below, p elements sortable cannot edit text. there anyway overcome this?

note have tried nesting p's in containers container sortable , p editable still cannot edit inner 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! can sorted cannot edited.</p>  	  	<!-- if nest p's in container still not editable -->  	<div class="test-container">  		<p id="bar" contenteditable="true">bar. help! can sorted cannot edited.</p>  	</div>  </div>

through random attempts @ getting work, found setting focus on element, , moving cursor end of content editable (as shown here nico burns) adequate content editable working.

my guess sortable prevents content editable getting focus because of sort of event.preventdefault or cancelbubble.

$(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 range (a range selection invisible)      range.selectnodecontents(contenteditableelement); //select entire contents of element range      range.collapse(false); //collapse range end point. false means collapse end rather start      selection = window.getselection(); //get selection object (allows change selection)      selection.removeallranges(); //remove selections made      selection.addrange(range); //make range have created visible selection    } else if (document.selection) //ie 8 , lower    {      range = document.body.createtextrange(); //create range (a range selection invisible)      range.movetoelementtext(contenteditableelement); //select entire contents of element range      range.collapse(false); //collapse range end point. false means collapse end rather start      range.select(); //select range (make 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! can sorted cannot edited.</p>      <div>      <p id="bar" contenteditable="true">bar. help! can sorted cannot edited.</p>    </div>  </div>