CODEWITHSUNDEEP
javascripthtml
mohammad khalawi
mohammad khalawi

Reputation: 33

Drag and Drop code that works on FireFox but not IE

I have the following drag-and-drop code. It works fine on Firefox but it does not work on IE.

//This function starts the event
function dragStart(ev) {
    ev.dataTransfer.effectAllowed= 'move'; //Makes the element movable
    ev.dataTransfer.setData("Image", ev.target.getAttribute('id')); // Grabs the element by its id
    return true;
}

//Prevents default but does not turn it off
function dragEnter(ev) {
    ev.preventDefault();
    return true;
}

//Turns off the dragover event and prevents default behavior
function dragOver(ev) {
    return false;
}

//This function performs the actual drop
function dragDrop(ev) {
    var oldImgId = ev.dataTransfer.getData("Image"); //The dragged element’s id is set to a variable

    ev.preventDefault();
    moveImg(oldImgId);
}

I got these errors from IE when I attempt to drag an image:

1)

'target' is null or not an object line 71
line 71 refers to: ev.dataTransfer.setData("Image", ev.target.getAttribute('id')); // Grabs the element by its id

2)

Object doesn't support this property or method line 77
line 77 refers to: ev.preventDefault();

Upvotes: 1

Views: 2364

Answers (2)

T. Junghans
T. Junghans

Reputation: 11683

IE only supports Text or an URL as data, so 'Image' won't work. Try

ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));

And here's the documentation: http://msdn.microsoft.com/en-us/library/ms536744(v=vs.85).aspx

Upvotes: 1

Francis Lewis
Francis Lewis

Reputation: 8980

You may want to use the jQuery UI drag & drop as it's designed to work with all current browsers. http://jqueryui.com/demos/droppable/

http://jqueryui.com/demos/draggable

Upvotes: 0

Related Questions