0

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?

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

1

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.

Community
  • 1
  • 1
Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
  • thanks, I'd appreciate if you showed it for my situation as it's a bit different than the one in the link you provided – Max Koretskyi May 05 '16 at 15:20
  • I see now, thanks. It's not using native draggable functionality of a browser. I'm wondering if there is any way to implement similar approach with native functionality? – Max Koretskyi May 06 '16 at 08:34
  • we're using [angular dndlist](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types) directive so there's already a similar functionality there too – Max Koretskyi May 06 '16 at 09:04