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.

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.

• javascript
• html
• internet-explorer
• drag-and-drop

• stackoverflow./questions/5500615/… – thecodejack Commented Aug 6, 2012 at 13:42
• @CodeJack, i have seen it already. There is no accepted solution. And i tried to replace <div> with <a> as suggested there. still no use. – Sathya Commented Aug 6, 2012 at 14:01
• caniuse./#search=drag See the notes for IE – Rob Commented Aug 21, 2012 at 16:29

1 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.