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