是否可以使 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>
最佳答案
通过随机尝试让它工作,我发现将焦点设置在元素上,然后将光标移动到可编辑内容的末尾(如 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>
关于javascript - 使 p 元素既可编辑内容又可排序 JQuery UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46211977/