Why The Div Whose Parent Is Draggable, Loses Its Contenteditable Attribute?

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 contente

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

Solution 2:

This is the best solution: $(. draggable).draggable() .click(function() { $(this).draggable({disabled: true}); }) .blur(function() { $(this).draggable({disabled: false}); });