Question

I have a child div whose parent div is draggable with content-editable set to true. I am using jQuery UI to make its parent div to be draggable but the child div loses its contenteditable attribute.

My question is why that child div is showing this kind of behaviour?

$(".draggable").draggable();

Fiddle Link

Answer 1

I’m not sure if editing and dragging can occur together. Anyway, you can cancel dragging when clicking on the editable area:

$(".editable").on("mousedown", function (e) {
    e.stopPropagation();
    return;
});

To enlarge draggable area, you need to shrink editable one, something like this:

.editable {
    max-width:190px;
    height:20px;
    border: 1px solid #f00;
    padding:1px;
    display: inline-block;
}

A working demo at jsFiddle.