Firefox：如果 contenteditable 嵌套在可拖动的父级中，则它是不可编辑的

Question

我有这个simple html：

<div draggable=true>
  <div contenteditable=true>can't edit me</div>
</div>

在 Chrome 中，我可以编辑 contenteditable 的内容，但在 Firefox 和 IE 中我不能这样做。这是一些已知问题吗？为什么 Chrome 允许编辑？任何现有的解决方法？

Answer 1

问题是draggable 元素的点击处理与contenteditable 处理冲突 - 两者都需要您点击，那么应该使用哪个处理程序？

您可以采取多种选择。以下版本在点击时禁用draggable，以便用户专注于可编辑的内容，然后双击启用：

<div class="content">
  <span>Edit and drag me</span>
</div>

$(".content").draggable()
  .click(function() {
    $(this).draggable({ disabled: false });
}).dblclick(function() {
    $(this).draggable({ disabled: true });
});

另外，here 有一个很好的解决方案，它涉及通过使用 CSS 定位的类选择器将 draggable 的 handle 属性设置为外部元素。这可能是比修改点击事件更好的解决方案，但这取决于您的使用情况。

更新 我已经添加了我在上面链接到here 的解决方案的略微修改版本。您可以编辑文本以及通过手柄图标拖动整个内容。