¿Cómo puedo habilitar 'arrastrar' en un elemento con contentEditable?

Question

Me gustaría tener un div que al mismo tiempo se pueda editar y arrastrar, usando jQuery UI. La capacidad de edición del contenido parece funcionar solo si el arrastrable no está habilitado. ¿Me estoy perdiendo de algo? Estoy usando jQuery 1.4.4 y 1.8.9 jQuery UI

JavaScript:

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

HTML:

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

Answer 1

Se está trabajando, pero el arrastrable jQuery está secuestrando evento de clic. Aún puede tabularlo. Esta es una solución rápida.

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

Answer 2

Si bien la respuesta proporcionada por Krule funcionará, existe un problema de usabilidad. El cursor siempre aparecerá al comienzo del área editable cuando se haga clic. Esto hace que sea imposible seleccionar texto con el mouse. La única forma de saltar a un área de texto es usar las teclas de flecha. No creo que esto sea aceptable.

La única solución que he podido llegar a es el uso de un "mango" para arrastrar:

<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

Esto me ha llevado a los frutos secos - pero hay una manera de hacerlo sin un control de arrastre. Utilice una etiqueta diferente para su editable elemento, y evitar que el elemento de ser arrastrado http://api.jqueryui.com/draggable/#option-cancel

Answer 4

que puede dar este div un 'div padre' y añadir draggable evento para que los padres. a continuación, utilizar la API oficial 'cancelar'

HTML:

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

JS:

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