首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5、draggable和contentEditable不能一起使用

HTML5、draggable和contentEditable不能一起使用
EN

Stack Overflow用户
提问于 2011-06-19 05:58:28
回答 2查看 5.1K关注 0票数 19

当在父元素(<li>)上启用draggable属性时,我不能让contenteditable在其子元素(<a>)上工作。

焦点转到子元素(<a>),但我根本不能编辑它。

请检查这个样品

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

编辑:当我在<li>上禁用draggable时我可以编辑内容

EN

回答 2

Stack Overflow用户

发布于 2012-06-17 19:44:49

今天我遇到了同样的问题,并找到了一个使用jQuery的解决方案

代码语言:javascript
复制
$('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而不是delegate

票数 7
EN

Stack Overflow用户

发布于 2014-09-20 03:00:08

使用html5sortable和更新的JQuery事件(委托被弃用,在初始问题3年后回答),错误仍然影响Chrome37。Contenteditable和html5sortable似乎在其他浏览器中运行得很好。我知道这只是部分相关,只是保留了我注意到的更改的文档。

代码语言:javascript
复制
$(document).on('focus', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL
});

$(document).on('blur', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6399131

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档