我想要一个使用 jQuery UI 同时可编辑和可拖动的 div。内容可编辑性似乎仅在未启用可拖动时才有效。我错过了什么吗?我正在使用 jQuery 1.4.4 和 jQuery UI 1.8.9
JavaScript:
$(function(){
$('#draggable').draggable();
});
HTML:
<div contenteditable="true" id="draggable">TEXT</div>
我想要一个使用 jQuery UI 同时可编辑和可拖动的 div。内容可编辑性似乎仅在未启用可拖动时才有效。我错过了什么吗?我正在使用 jQuery 1.4.4 和 jQuery UI 1.8.9
JavaScript:
$(function(){
$('#draggable').draggable();
});
HTML:
<div contenteditable="true" id="draggable">TEXT</div>
虽然 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>
它正在工作,但 jQuery 可拖动正在劫持点击事件。您仍然可以选择它。这是一个快速修复。
$('#draggable').draggable().bind('click', function(){
$(this).focus();
})
您可以给这个 div 一个“父 div”并将draggable
事件添加到它的父级。然后使用官方 API '取消'
HTML:</p>
<div id="draggable">
<div contenteditable="true" class="editable">TEXT</div>
</div>
JS:
$('#draggable').draggable({cancel: '.editable'});
这让我发疯了——但有一种方法可以在没有拖动手柄的情况下做到这一点。为您的可编辑元素使用不同的标签,并防止该元素被拖动 http://api.jqueryui.com/draggable/#option-cancel