Menu

HTML5 and Drag And Drop

HTML5 and Drag And Drop is every thing else than intuitive. All implementations suffer from nasty bugs. Here are some impression from quirksmode.org on HTML5 and Drag'n'Drop

If you embed in Firefox an "editable" element like "INPUT" or "TEXTAREA" into a a "draggable" element things are getting strange.

Just take the following snipplet...

<div>
  <input/>
</div>

... add the draggable="true" attribute...

<div draggable="true">
  <input/>
</div>

... The try to select text with your mouse in the input box. An you will notice it does not work.

It seems to me draggable event override classic mouse click events. So the solution to this is pretty simple. When you mouse over an editable element, remove all draggable attributes and add them again when the mouse exits.

The following code uses jQuery to illustrate this workaround:

$(document).ready(function() {

  // A container containing all the editable and draggable elements
  $("#divOutput").mouseover(function(ev) {

    switch (ev.target.nodeName)
    {
      case "INPUT":
      case "TEXTAREA" :
        $("[draggable=true]").attr("draggable","false");
        break;

      default:
        $("[draggable=false]").attr("draggable","true"); 
    }
});
Posted by Thomas Schmid 2012-03-04 Labels: HTML5 Drag&Drop Drag and Drop input textarea draggable

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.