Come posso abilitare il 'draggable' su un elemento con contentEditable?

Question

Mi piacerebbe avere un div che sia allo stesso tempo modificabile e trascinabile, usando l'interfaccia utente di jQuery. La modifica dei contenuti sembra funzionare solo se il trascinamento non è abilitato. Mi sto perdendo qualcosa? Sto utilizzando jQuery 1.4.4 e 1.8.9 jQuery UI

JavaScript:

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

HTML:

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

Answer 1

Si sta lavorando, ma il trascinabile jQuery è dirottamento evento click. Puoi ancora collegarci ad esso. Questa è una soluzione rapida.

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

Answer 2

Mentre la risposta fornita da Krule funziona, c'è un problema di usabilità. Il cursore apparirà sempre all'inizio dell'area modificabile quando si fa clic. Ciò rende impossibile selezionare il testo con il mouse. L'unico modo per passare a un'area di testo è usare i tasti freccia. Non credo che sia accettabile.

L'unica soluzione che ho potuto venire in mente è di utilizzare un "manico" per il trascinamento:

<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

Questo mi ha spinto noci - ma c'è un modo per farlo senza una maniglia di trascinamento. Utilizzare un tag diverso per il vostro elemento modificabile, ed impedire che elemento di essere trascinato http://api.jqueryui.com/draggable/#option-cancel

Answer 4

si può dare a questo Div A 'div genitore' e aggiungere draggable evento ad esso genitore. quindi utilizzare API ufficiale 'annullare'

HTML:

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

JS:

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