HTML5,draggable and contentEditable not working together

Question

When a draggable attribute is enabled on a parent element(<li>) I cant make contenteditable work on its child element (<a>).

The focus goes on to child element (<a>),but I cant edit it at all.

Please check this sample

http://jsfiddle.net/pavank/4rdpV/11/

EDIT: I can edit content when I disable draggable on <li>

Answer 1

I came across the same problem today, and found a solution [using jQuery]

$('body').delegate('[contenteditable=true]','focus',function(){
    $(this).parents('[draggable=true]')
            .attr('data-draggableDisabled',1)
            .removeAttr('draggable');
    $(this).blur(function(){
        $(this).parents('[data-draggableDisabled="1"]')
                .attr('draggable','true')
                .removeAttr('data-draggableDisabled');
    });
});

$('body') can be replaced by anything more specific.

If new contenteditable elements are not added in the runtime, one can use bind instead of delegate.

Answer 2

It makes sense that the draggable and contenteditable properties would collide. contenteditable elements, like any text field, will focus on mousedown (not click). draggable elements operate based on mousemove, but so does selecting text in a contenteditable element, so how would the browser determine whether you are trying to drag the element or select text? Since the properties can't coexist on the same element, it appears that you need a javascript solution.

Try adding these two attributes to your anchor tag:

onfocus="this.parentNode.draggable = false;"
onblur="this.parentNode.draggable = true;"

That works for me if I add it to the <a> tags in your jsFiddle. You could also use jQuery if it's more complicated than getting the parentNode.