拖放在 IE 中不起作用 - Javascript、HTML5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12803235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
drag and drop not working in IE - Javascript, HTML5
提问by Tomcatom
I've built this checker-board app which uses HTML5's Drag&Drop with javascript. It works great on chrome and firefox, but not on IE9 or IE8. My guess is that the problem is with how I attached the events.
我已经构建了这个棋盘应用程序，它使用 HTML5 的拖放和 JavaScript。它适用于 chrome 和 firefox，但不适用于 IE9 或 IE8。我的猜测是问题在于我如何附加事件。
This here is where the events are attached for all browsers BUT IE:
这是为所有浏览器但 IE 附加事件的地方：
function eventer(){
for (var i = 0, len = allPieces.length; i < len; i++){
allPieces[i].addEventListener('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
allSquares[i].addEventListener('dragstart', handleDragStart, false);
allSquares[i].addEventListener('dragenter', handleDragEnter, false);
allSquares[i].addEventListener('dragover', allowDrop, false);
allSquares[i].addEventListener('dragleave', handleDragLeave, false);
allSquares[i].addEventListener('drop', handleDrop, false);
}
}
...and this is the attachments for IE:
...这是IE的附件：
function eventerIE(){
for (var i = 0, len = allPieces.length; i < len; i++){
allPieces[i].attachEvent('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
allSquares[i].attachEvent('dragstart', handleDragStart);
allSquares[i].attachEvent('dragenter', handleDragEnter);
allSquares[i].attachEvent('dragover', allowDrop);
allSquares[i].attachEvent('dragleave', handleDragLeave);
allSquares[i].attachEvent('drop', handleDrop);
}
}
These are the functions that are called on event:
这些是在事件上调用的函数：
function handleDragStart(e){
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handlePieceDragStart(e){
dragPiece = this;
e.dataTransfer.setData('id', dragPiece.id);
dragPieceId = dragPiece.id;
}
function handleDragEnter(e){
this.classList.add('over');
}
function allowDrop(e){
e.preventDefault();
};
function handleDragLeave(e){
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
pId = e.dataTransfer.getData('id');
this.taken = dragPiece.id;
sId = this.id;
}
var sqrs = document.getElementsByTagName("td");
[].forEach.call(sqrs, function (col){
col.classList.remove('over');
});
for(var i=0, len = piecesPosition.length; i < len; i++){
if (piecesPosition[i][0]==dragPiece.id){
delete piecesPosition[i];
piecesPosition.push([dragPiece.id,sId]);
piecesPosition = piecesPosition.filter(function(){return true});
}
}
dragPiece = document.getElementById(dragPieceId);
dragPiece.pstn = sId;
this.classList.remove('over');
}
I hope the code gives a good idea as to what is happening there, if you have any questions about it I would love to comment and explain more.
我希望代码能很好地说明那里发生的事情，如果您对此有任何疑问，我很乐意发表评论并解释更多。
Thanks ahead
提前致谢
EDIT:After Iv'e changed the events as @Chase suggested, The functions are being called upon event, and now I get an Invalid argumenterror for e.dataTransfer.setData('text/html', this.innerHTML);inside the function handleDragStart.
编辑：在我按照@Chase 的建议更改了事件之后，函数正在调用事件，现在我在函数内部收到Invalid argument错误。e.dataTransfer.setData('text/html', this.innerHTML);handleDragStart
Again, that's only in IE9 and IE8 mode.
同样，这仅适用于 IE9 和 IE8 模式。
回答by Chris Herring
Use "text" instead of "text/html"
使用“文本”而不是“文本/html”
e.dataTransfer.setData("text", this.innerHTML);
See this article for explanation
Even though Internet Explorer started out by introducing only "text" and "URL" as valid data types, HTML5 extends this to allow any MIME type to be specified. The values "text" and "URL" will be supported by HTML5 for backwards compatibility, but they are mapped to "text/plain" and "text/uri-list".
尽管 Internet Explorer 开始时仅引入“文本”和“URL”作为有效数据类型，但 HTML5 对此进行了扩展以允许指定任何 MIME 类型。为了向后兼容，HTML5 将支持值“text”和“URL”，但它们被映射到“text/plain”和“text/uri-list”。
回答by David
You need to do two things for the drag and drop to work in I.E..
要在 IE 中进行拖放操作，您需要做两件事。
1) When you set and get the data use 'text' and not 'text/html'
1) 当您设置和获取数据时，请使用“text”而不是“text/html”
e.dataTransfer.setData('text', this.innerHTML);
e.dataTransfer.getData('text');
2) Prevent the default behaviour when handling 'dragenter' (as well as 'dragover').
2) 防止处理“dragenter”（以及“dragover”）时的默认行为。
function handleDragEnter(e) {
if (e.preventDefault) {
e.preventDefault();
}
...
}
回答by Ganesh Bonangi
setDatamethod expect String data type not Number
setData方法期望字符串数据类型不是数字
setData('text',1)//is wrong
setData('text',''+1)//is correct
回答by Chase
IE is a bit different than most, try ondragstart, ondragenter, etc..
IE浏览器是比大多数，尝试有点不同ondragstart，ondragenter等等。
allSquares[i].attachEvent('ondragstart', handleDragStart);
allSquares[i].attachEvent('ondragenter', handleDragEnter);
allSquares[i].attachEvent('ondragover', allowDrop);
allSquares[i].attachEvent('ondragleave', handleDragLeave);
allSquares[i].attachEvent('ondrop', handleDrop);
EDIT:
编辑：
function handleDragStart(e){
if(!e)
e = window.event;
dragSrcEl = (window.event) ? window.event.srcElement /* for IE */ : event.target;
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/html', dragSrcEl.innerHTML);
}
