如何使div满足和可拖动

Question

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

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

我只能拖动这个div，但我怎么能编辑它（比如双击可编辑属性变为活动状态，点击拖动变为活动状态）？

Answer 1

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

DEMO

Answer 2

$("#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');
});

这是DEMO：http://jsfiddle.net/UH9UE/222/。

Answer 3

另一种选择是传递.draggable（{handle：“handleDiv”}），它允许你一直保持可拖动状态，并允许进行有意义的编辑。只需使用内部有两个div来制作可拖动的div：句柄和你的contenteditable div。

API documentation

Answer 4

<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   
}); 
});