Internet Explorer 9 Drag and Drop (Dnd)

Internet Explorer 9 Drag and Drop (DnD)

Well i have encountered this same weird behaviour in IE9, it appears to be that IE9 wont do a Drag and Drop (HTML 5 style) on div's. if you would change the div for a A with href="#" you will be able to drag and drop.

this won't drag:

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

and this will:

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

Hope this helps anyone

Dart HTML5 Drag and Drop in Internet Explorer 9

Found a solution by adding a little javascript to my main HTML filer (please tell me if you have a better idea):

<html>
  <head>
    <!-- some stuff -->
    <script type="text/javascript">
      function callDragDrop(el) {
        el.dragDrop();
      }
    </script>
  </head>
  <body>
  <!-- some stuff -->
  </body>
 </html>

Now I can call this function with Darts js-interop:

/**
 * Workaround to enable drag-and-drop elements other than links and images in
 * Internet Explorer 9.
 */
void _enableIE9drag(Element element) {
  if (element.draggable == null) {
    // HTML5 draggable support is not available --> try to use workaround.

    element.onSelectStart.listen((MouseEvent event) {
      // Prevent selection of text.
      event.preventDefault();

      // Use the javascript function to call the native dragDrop() of element
      js.context.callDragDrop(element);
    });
  }
}

Edit

Created a helper library to use HTML5 Drag and Drop in Dart.

HTML drag and drop in IE9

It'll work if you replace div with a tags. However there are a couple of other changes you ought to make, firstly make sure that the a tags aren't clickable links by returning false in the onclick event:

<a class="div123" href="#" draggable="true"
 ondragstart="handleDragStart(event)"
 ondrop="handleDrop(event)"
 ondragover="dragoveHandler(event)"
 onclick="return false;">
    HTML5 drag and drop
</a>

Secondly, IE9 doesn't accept parameters of text/plain in setData, use Text instead or add the data inside of a try...catch. Also, you should make sure the data you're adding is actually text:

e.dataTransfer.setData("Text", "" + $(e.target).index());

Finally your handleDrop function needs to preventDefault/return false because otherwise the default action for dropping a link (an a element`) is to navigate to the dropped URL:

function handleDrop(e) {
    alert($(e.target).index());
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Stops redirect.
    }
    return false;
}

Here is a jsFiddle of your code which will work in IE9.

Exchange (Mail) Drag and Drop eMail in Internet Explorer (10)

When you drag an eMail in Outlook Web App or Exchange with the Internet Explorer it gets copied into the clipboard.

With:

window.clipboardData.getData("Text");

you can get the data. However you need to enable the clipboard option in the Internet Security Policy Settings.

Internet Explorer 9 Drag and Drop (Dnd)