如何使 div 内容可编辑和可拖动答案

【问题标题】：How to make a div contenteditable and draggable如何使 div 内容可编辑和可拖动
【发布时间】：2012-04-25 13:50:52
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

DEMO

【讨论】：

【解决方案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/。

【讨论】：

第一次点击area时不起作用。有什么遗漏吗？

【解决方案3】：

另一个选项是传递 .draggable({ handle: "handleDiv" }) ，它允许您始终保持可拖动以及允许内容可编辑的编辑。只需让你的可拖动 div 里面有两个 div：句柄和你的 contenteditable div。

API documentation

【讨论】：

【解决方案4】：

我发现跟随行为更加直观和流畅（无需双击）。

第 1 版（最佳） http://jsfiddle.net/k1d9ftyu/

d.onmousedown = e => {
    d.contentEditable = false
}

d.ondragstart = e => {
    e.dataTransfer.setData('text', "XXX");
}

d.ondragend = () => {
    d.contentEditable = true
}

d.onmouseup = e => {
    d.contentEditable = true
    if (document.caretRangeFromPoint)
        range = document.caretRangeFromPoint(e.clientX, e.clientY)
    else {   // firefox
        var sel = window.getSelection()
        sel.collapse(e.rangeParent, e.rangeOffset)
    }
}

#d {
    background-color: #cfc;
    width: 200px;
}

#d[contenteditable=false] {
    cursor: grab;
}

<div contenteditable=true>
The green child div is contenteditable by default (as well as the parent div). The caret can run through both divs.
<div id="d" draggable=true contenteditable=true>Mousedown sets contenteditable=false, the div can be dragged. If not dragged after click, it becomes again contenteditable.</div>
The caret is positioned according to the last click.
</div>

第 2 版

与版本 1 类似，但使用 mouseenter 并且需要再次单击才能正确定位插入符号：http://jsfiddle.net/z8aojdg6

第 3 版
原始版本默认为contenteditable=false。由于focus() 调用，插入符号被放置在行尾。因此，需要再次单击以重新定位插入符号（使用 selection 和 range 可能会有所改进）。

d.onmouseup = () => {
  d.contentEditable = true
  d.focus()
}

d.onblur = () => {
  d.contentEditable = false
}

#d {
    background-color: #ccc;
    width: 130px;
    height: 90px;
}
#d:focus {
    outline: 2px solid blue;
}

<div id="d" draggable=true contenteditable=false>
  Edit me when focussed. Drag me when inactive.</div>

演示：http://jsfiddle.net/rz28c0xe

【讨论】：

【解决方案5】：

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

【讨论】：