Làm cách nào để tôi có thể bật 'có thể kéo' trên một phần tử có contentEditable?

Question

Tôi muốn có một div đồng thời có thể chỉnh sửa và có thể kéo được, sử dụng giao diện người dùng jQuery. Khả năng chỉnh sửa nội dung dường như chỉ hoạt động nếu không thể bật tính năng kéo được. Tui bỏ lỡ điều gì vậy? Tôi đang sử dụng jQuery 1.4.4 và jQuery UI 1.8.9

JavaScript:

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

HTML:

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

Answer 1

Nó được làm việc nhưng có thể kéo jQuery là cướp sự kiện nhấp chuột. Bạn vẫn có thể tab cho nó. Đây là một sửa chữa nhanh chóng.

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

Answer 2

Trong khi câu trả lời được cung cấp bởi Krule sẽ hoạt động, có vấn đề về khả năng sử dụng. Con trỏ sẽ luôn xuất hiện ở đầu khu vực có thể chỉnh sửa khi được nhấp. Điều này làm cho nó không thể chọn văn bản bằng chuột. Cách duy nhất để chuyển đến một vùng văn bản là sử dụng các phím mũi tên. Tôi không tin điều này là chấp nhận được.

Giải pháp duy nhất tôi đã có thể đưa ra là sử dụng một "xử lý" cho kéo:

<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

này đã khiến tôi phát điên - nhưng có một cách để làm điều đó mà không có một tay cầm kéo. Sử dụng một thẻ khác cho các phần tử có thể chỉnh sửa của bạn, và ngăn chặn yếu tố đó không bị kéo http://api.jqueryui.com/draggable/#option-cancel

Answer 4

bạn có thể cho này div một 'div cha mẹ' và thêm draggable sự kiện để nó mẹ. sau đó sử dụng API chính thức 'hủy'

HTML:

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

JS:

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