适用于FireFox但不适用于IE的拖放代码

Question

我有以下拖放代码。 它在Firefox上可以正常工作，但在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);
}

尝试拖动图像时，我从IE中收到这些错误：

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();

Answer 1

IE仅支持文本或URL作为数据，因此“图像”将不起作用。 尝试

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

这是文档： http : //msdn.microsoft.com/zh-cn/library/ms536744(v=vs.85).aspx

Answer 2

您可能想使用jQuery UI拖放功能，因为它旨在与所有当前浏览器一起使用。 http://jqueryui.com/demos/droppable/

http://jqueryui.com/demos/draggable