如何在具有contentEditable的元素上启用"draggable"？

Question

我希望使用jQuery UI同时具有可编辑和可拖动的div.内容可编辑性似乎仅在未启用可拖动时才有效.我错过了什么吗？我正在使用jQuery 1.4.4和jQuery UI 1.8.9

JavaScript的:

$(function(){
    $('#draggable').draggable();
});  

HTML:

<div contenteditable="true" id="draggable">TEXT</div>

Answer 1

虽然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>

Answer 2

它正在工作,但jQuery draggable是劫持点击事件.你仍然可以选择它.这是一个快速解决方案.

$('#draggable').draggable().bind('click', function(){
  $(this).focus();
})