CODEWITHSUNDEEP
jquerycontenteditablejquery-ui-draggable
Tommy
Tommy

Reputation: 1239

How can I enable 'draggable' on a element with contentEditable?

I'd like to have a div that is at the same time editable and draggable, using jQuery UI. Content editability seems to work only if draggable is not enabled. Am I missing something? I'm using jQuery 1.4.4 and jQuery UI 1.8.9

JavaScript: 

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

HTML: 

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

Upvotes: 8

Views: 8860

Answers (4)

oliver34
oliver34

Reputation: 330

you can give this div a 'parent div' and add draggable event to it parent. then use offical API 'cancel'

HTML：

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

JS:

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

Upvotes: 3

user3046913
user3046913

Reputation: 93

This has driven me nuts - but there's a way to do it without a drag handle. Use a different tag for your editable element, and prevent that element from being dragged http://api.jqueryui.com/draggable/#option-cancel

Upvotes: 1

tybro0103
tybro0103

Reputation: 49703

While the answer provided by Krule will work, there is a usability problem. The cursor will always appear at the beginning of the editable area when clicked. This makes it impossible to select text with the mouse. The only way to jump to an area of text is to use arrow keys. I don't believe this is acceptable.

The only solution I have been able to come up with is to use a "handle" for dragging:

<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>

Upvotes: 16

Krule
Krule

Reputation: 6476

It is working but the jQuery draggable is hijacking click event. You can still tab to it. This is a quick fix.

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

Upvotes: 13

Related Questions