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

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

JavaScript的：

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

HTML：

 
TEXT 

Answer 1

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

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

Answer 2

虽然Krule提供的答案可行，但存在可用性问题。 单击时，光标将始终显示在可编辑区域的开头。 这使得用鼠标选择文本成为不可能。 跳转到文本区域的唯一方法是使用箭头键。 我不相信这是可以接受的。

我能够提出的唯一解决方案是使用“句柄”进行拖动：

  
 
+
 
type here...
 
  

Answer 3

这让我疯狂 – 但有一种方法可以在没有拖动手柄的情况下完成。 为可编辑元素使用不同的标记，并防止该元素被拖动http://api.jqueryui.com/draggable/#option-cancel

Answer 4

你可以给这个div一个’父div’并添加draggable事件给它父。 然后使用官方API’取消’

HTML：

 
 
TEXT
  

JS：

  $('#draggable').draggable({cancel: '.editable'});