CODEWITHSUNDEEP
javascripthtmlgoogle-chromeinternet-explorerfirefox
Max Koretskyi
Max Koretskyi

Reputation: 105449

Firefox: contenteditable is not editable if it's nested inside draggable parent

I have this simple html:

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

In Chrome, I can edit the contents of contenteditable, but I can't do that in Firefox and IE. Is this some known issue? Why does Chrome allow editing? Any existing workarounds?

Upvotes: 0

Views: 560

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 23958

The issue is that the click handling for the draggable element conflicts with the contenteditable handling - both require you to click, so which handler should be used?

There are a couple of options you could take. The version below disables draggable when you click, so as to allow the user to focus on the editable content, and then enables it if you double click instead:

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

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

Alternatively, there is a good solution here which involves setting the handle property of draggable to an outer element via a class selector, which is positioned with CSS. This is probably a nicer solution than hacking around with click events, but it depends on your usage.

Update I have added a slightly modified version of the solution I linked to above here. You can edit the text as well as drag the whole thing via the handle icon.

Upvotes: 1

Related Questions