Cách tạo div có thể chỉnh sửa và có thể kéo

Question

<div contenteditable="true" id="d"> 
<span>Text to edit</span> 
</div> 

$("#d").draggable(); 

Tôi chỉ có thể kéo div này nhưng làm cách nào tôi có thể chỉnh sửa nó (như trên thuộc tính có thể chỉnh sửa gấp đôi trở thành hoạt động và khi nhấp chuột trở nên hoạt động)?

Answer 1

$("#d").draggable() 
    .click(function() { 
    $(this).draggable({ disabled: false }); 
}).dblclick(function() { 
    $(this).draggable({ disabled: true }); 
}); 
​​ 

DEMO

Answer 2

<div contenteditable="true" id="d"> 
<span>Text to edit</span> 
</div> 

$(function(){ 
$("#d").click(function() { 
$("#d").draggable();  
}); 

$("#d").dblclick(function(){ 
see here for this functionality http://stackoverflow.com/questions/2441565/how-do-i-make-a-div-element-editable-like-a-textarea-when-i-click-it 
}); 
}); 

Answer 3

lựa chọn khác là để vượt qua .draggable ({xử lý: "handleDiv"}) mà cho phép bạn giữ có thể kéo trên tất cả các thời gian cũng như cho phép chỉnh sửa có thể chỉnh sửa được. Chỉ cần thực hiện div có thể kéo của bạn với hai div bên trong: tay cầm và div có thể chỉnh sửa nội dung của bạn.

API documentation

Answer 4

$("#d") 
.draggable() 
.click(function(){ 
    if ($(this).is('.ui-draggable-dragging')) { 
     return; 
    } 
    $(this).draggable("option", "disabled", true); 
    $(this).attr('contenteditable','true'); 
}) 
.blur(function(){ 
    $(this).draggable('option', 'disabled', false); 
    $(this).attr('contenteditable','false'); 
}); 

Đây là DEMO: http://jsfiddle.net/UH9UE/222/.