HTML5，可拖动和contentEditable不能一起工作 [英] HTML5,draggable and contentEditable not working together

问题描述

在父元素（< li> ）上启用 draggable 属性时，我无法使 contenteditable 处理其子元素（< a> ）。

焦点转移到子元素（< a> ），但我根本无法编辑它。

请检查此示例

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

编辑：当我禁用可拖动 on < li>

解决方案

  $（'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'）可以是由更具体的任何东西取代。

如果在运行时没有添加新的 contenteditable 元素，可以使用 bind 而不是委托。

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>

解决方案

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.

这篇关于HTML5，可拖动和contentEditable不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！