如何使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');
});

这是演示:http: //jsfiddle.net/UH9UE/222/.

Answer 3

另一个选择是传递.draggable({handle:"handleDiv"}),它允许你一直保持可拖动状态,并允许进行可信的编辑.只需使用两个div来制作你的可拖动div:句柄和你的contenteditable div.

API文档