8

jQuery UIを使用して、同時に編集可能でドラッグ可能なdivが必要です。コンテンツの編集可能性は、ドラッグ可能が有効になっていない場合にのみ機能するようです。私は何かが足りないのですか？jQuery1.4.4とjQueryUI1.8.9を使用しています

JavaScript：

$(function(){
    $('#draggable').draggable();
});

HTML：

<div contenteditable="true" id="draggable">TEXT</div>
4

4 に答える 4

16

Kruleが提供する答えは機能しますが、使いやすさの問題があります。クリックすると、カーソルは常に編集可能領域の先頭に表示されます。これにより、マウスでテキストを選択できなくなります。テキストの領域にジャンプする唯一の方法は、矢印キーを使用することです。私はこれが受け入れられるとは思わない。

私が思いついた唯一の解決策は、ドラッグに「ハンドル」を使用することです。

<style>
.positionable {
    position:absolute;
    width:400px; height:200px;
}
.drag_handle {
    position:absolute;
    top:-8px; left:-8px;
    background-color:#FFF; color:#000;
    width:14px; height:14px;
    cursor:move;
    font-size:14px; line-height:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
}
.editable {
    outline:none;
    width:100%; height:100%;
}
</style>

<div class="positionable">
    <div class="drag_handle">+</div>
    <div class="editable" contentEditable="TRUE">type here...</div>
</div>

<script>
    $('.positionable').draggable({handle: '.drag_handle'});
</script>
于 2011-07-06T21:24:00.383 に答える
13

動作していますが、jQueryドラッグ可能はクリックイベントを乗っ取っています。あなたはまだそれにタブで移動することができます。これは簡単な修正です。

$('#draggable').draggable().bind('click', function(){
  $(this).focus();
})
于 2011-02-10T09:03:56.827 に答える
3

このdivに「親div」を指定draggableして、その親にイベントを追加できます。次に、公式APIを使用します'キャンセル'

HTML：</ p> 

<div id="draggable">
    <div contenteditable="true" class="editable">TEXT</div>
</div>

JS：

 $('#draggable').draggable({cancel: '.editable'});
于 2017-04-11T09:20:21.233 に答える
1

これは私を狂わせました-しかし、ドラッグハンドルなしでそれを行う方法があります。編集可能な要素に別のタグを使用し、その要素がドラッグされないようにします http://api.jqueryui.com/draggable/#option-cancel

于 2013-11-28T17:54:01.007 に答える