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，它涉及通过类定位器将handle draggable属性设置为外部元素，类选择器使用CSS定位。这可能是一个比黑客攻击点击事件更好的解决方案，但这取决于您的使用情况。

<强>更新我添加了一个稍微修改过的解决方案，我将其链接到上面here。您可以编辑文本以及通过句柄图标拖动整个文本。

Firefox：如果它嵌套在可拖动的父

1 个答案: