contentEditable이있는 요소에서 'draggable'을 활성화하려면 어떻게해야합니까?

Question

jQuery UI를 사용하여 동시에 편집 및 드래그 할 수있는 div를 갖고 싶습니다. 콘텐츠 편집 기능은 드래그 가능 기능을 사용할 수없는 경우에만 작동하는 것으로 보입니다. 내가 놓친 게 있니? 내가 jQuery를 1.4.4와 jQuery를 UI를 사용하고 1.8.9

자바 스크립트 :

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

HTML :

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

Answer 1

그것은 작동하지만 JQuery와 드래그는 클릭 이벤트를 납치한다. 여전히 탭으로 이동할 수 있습니다. 이것은 빠른 수정입니다.

$('#draggable').draggable().bind('click', function(){ 
    $(this).focus(); 
}) 

Answer 2

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> 

Answer 3

이가 나에게 견과류를 주도하고있다 -하지만 드래그 핸들없이 할 수있는 방법이있다 :

내가 가지고 올 수 있었던 유일한 해결책은 드래그은 "처리"는 사용하는 것입니다. 당신의 편집 가능한 요소에 대해 다른 태그를 사용하여 인에서 해당 요소를 방지 당신이이 '부모 사업부를'div에 제공하고 부모에게 draggable 이벤트를 추가 할 수 있습니다 http://api.jqueryui.com/draggable/#option-cancel

Answer 4

끌었다.

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

JS :

이

$('#draggable').draggable({cancel: '.editable'});