Question

Using HTML5 Drag and Drop, text within the draggable container becomes non-selectable.

I’ve tried adding user-select CSS tags to the parent element of the text but it did not seem to help.

   [draggable] {
     -moz-user-select: all;
     -khtml-user-select: all;
     -webkit-user-select: all;
      user-select: all;
   }

This fiddle (from HTML5 Rocks) demonstrates the issue I’m having.

The HTML5 Rocks Drag and Drop tutorial does say “If you want to enable other types of content to be draggable, you’ll need to leverage the HTML5 DnD APIs.” I guess I don’t know how that can work

This fiddle works, but makes use of jQuery UI, I cannot use jQuery UI due to its heavy payload.

Is there a standard, lightweight way to get selection with drag and drop support?

Answer 1

So simple trick here is to make dragable header element, not whole element.

<div class="dragme">
    <header dragable="true">Header</header>
 <p>Content</p>
</div>