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

それが機能していますが、jQueryのドラッグは、クリックイベントをハイジャックされます。あなたはそれに引き続きタブすることができます。これは簡単な修正です。

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

Answer 2

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 3

をこれは私にナットを推進してきました - しかし、ドラッグハンドルなしでそれを行う方法があります。 は、あなたの編集可能な要素のために別のタグを使用し、 であることから、その要素を防ぐあなたは、これが「親のdivを」DIV与え、それ親にdraggableイベントを追加することができます http://api.jqueryui.com/draggable/#option-cancel

Answer 4

をドラッグ。

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

JS：あなたが使用している編集可能なプラグイン

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