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

デモ

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

もう 1 つのオプションは、.draggable({ handle: "handleDiv" }) を渡すことです。これにより、コンテンツ編集可能な編集を許可するだけでなく、常にドラッグ可能に保つことができます。内部に 2 つの div を含むドラッグ可能な div を作成するだけです: ハンドルと contenteditable div。

API ドキュメント

Answer 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ますが、キャレットを正しく配置するには 2 回目のクリックが必要です: http://jsfiddle.net/z8aojdg6

バージョン 3デフォルト
で付いている元のバージョン。contenteditable=false呼び出しのためfocus()、キャレットは行末に配置されます。したがって、キャレットを再配置するには 2 回目のクリックが必要です ( と を使用すると改善される可能性があります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

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

</p>