HTML drag and drop in IE9

Question

I tried drag and drop in HTML. It is working good in all browsers except IE9 (no need to work on lower than IE9). ondrop event is not triggered in IE9.

any help? here is my code.

jsFiddle

Thanks in advance.

Answer 1

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 .