Как включить «перетаскивание» для элемента с contentEditable?

Question

Я хотел бы иметь div, который одновременно можно редактировать и перетаскивать, используя пользовательский интерфейс jQuery. Редактирование содержимого, кажется, работает, только если перетаскивание не включено. Я что-то пропустил? Я использую 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 захватывает событие click. Вы все еще можете перейти к нему. Это быстрое решение.

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

Answer 3

Это сводит меня с ума - но есть способ сделать это без ручки перетаскивания. Используйте другой тег для вашего редактируемого элемента и не позволяйте этому элементу быть тащили http://api.jqueryui.com/draggable/#option-cancel

Answer 4

вы можете присвоить этому div 'родительский div' и добавить событие draggable к нему parent.затем используйте официальный API «отмена»

HTML ：

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

JS:

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