Jquery 如何在具有contentEditable的元素上启用“可拖动”?
我希望使用jQueryUI创建一个同时可编辑和可拖动的div。内容可编辑性似乎只有在未启用draggable时才起作用。我错过什么了吗?我正在使用jQuery1.4.4和jQueryUI1.8.9 JavaScript:Jquery 如何在具有contentEditable的元素上启用“可拖动”?,jquery,contenteditable,jquery-ui-draggable,Jquery,Contenteditable,Jquery Ui Draggable,我希望使用jQueryUI创建一个同时可编辑和可拖动的div。内容可编辑性似乎只有在未启用draggable时才起作用。我错过什么了吗?我正在使用jQuery1.4.4和jQueryUI1.8.9 JavaScript: $(function(){ $('#draggable').draggable(); }); HTML: <div contenteditable="true" id="draggable">TEXT</div> 它正在工作,但jQuer
$(function(){
$('#draggable').draggable();
});
HTML:
<div contenteditable="true" id="draggable">TEXT</div>
它正在工作,但jQuery draggable正在劫持单击事件。你仍然可以使用tab。这是一个快速解决方案
$('#draggable').draggable().bind('click', function(){
$(this).focus();
})
虽然Krule提供的答案会起作用,但存在可用性问题。单击时,光标将始终显示在可编辑区域的开头。这使得无法使用鼠标选择文本。跳转到文本区域的唯一方法是使用箭头键。我认为这是不可接受的 我能想到的唯一解决方案是使用手柄拖动:
<style>
.positionable {
position:absolute;
width:400px; height:200px;
}
.drag_handle {
position:absolute;
top:-8px; left:-8px;
background-color:#FFF; color:#000;
width:14px; height:14px;
cursor:move;
font-size:14px; line-height:14px;
font-weight:bold;
text-align:center;
border:1px solid #000;
}
.editable {
outline:none;
width:100%; height:100%;
}
</style>
<div class="positionable">
<div class="drag_handle">+</div>
<div class="editable" contentEditable="TRUE">type here...</div>
</div>
<script>
$('.positionable').draggable({handle: '.drag_handle'});
</script>
这让我发疯了——但有一种方法不用拖动手柄就能做到。 为可编辑元素使用不同的标记,并防止该元素被删除 拖
您可以将此div设置为“父div”,并将可拖动事件添加到父div中。然后使用官方API“取消” HTML:
<div id="draggable">
<div contenteditable="true" class="editable">TEXT</div>
</div>
您使用的是哪个可编辑插件?它不是插件-contenteditable只是一个HTML5属性。问题是focus将光标设置在开始位置,而不是单击的位置。有用的代码片段。我担心我是唯一有问题的人,显然所有的问题都已经被问/回答了。
$('#draggable').draggable({cancel: '.editable'});