html5 dragover 在 IE 5.5 到 IE 8 中不起作用

Question

我知道除了 IE 9 之外，IE 不支持 html5 dragover。我正在复制粘贴我的 js 文件代码，它可以与 Chrome / Mozilla 一起使用图像拖放功能，但不能在 IE 中使用。我需要一个适用于所有浏览器的解决方案。例如，从 js 中删除 dragover 功能，让我知道如何提供图像路径（硬编码）或使用简单的文件上传。感谢并等待回复。

    jQuery(function($) {
    var sourceImg = $('<img>')[0],
    description = $('#description'),
    sourceCanvas = $('#source')[0],
    sourceCtx = sourceCanvas.getContext('2d'),
    compressedCanvas = $('#compressed')[0],
    compressedCtx = compressedCanvas.getContext('2d'),
    compressedOverlayCanvas = $('#compressedOverlay')[0],
    compressedOverlayCtx = compressedOverlayCanvas.getContext('2d'),
    all = $('canvas'),
    quality = 88,
    scale = 10;

function analyzeImage(image){
    all.attr('width', image.width);
    all.attr('height', image.height);
    sourceCtx.drawImage(image, 0, 0);
    var sourceData = sourceCtx.getImageData(0, 0, image.width, image.height),
        compressed = $('<img>');
    $('<img>')
        .on('load', function() {
            compressedCtx.drawImage(this, 0, 0);
            var compressedData = compressedCtx.getImageData(0, 0, image.width, image.height),
                data0 = sourceData.data,
                data1 = compressedData.data;

            for(var i = 0, l = data0.length; i < l; i+=4) {
                for(var j = 0; j < 3; j++) {
                    var error = Math.abs(data0[i+j]-data1[i+j]);
                    data0[i+j] = error*scale;
                }
            }
            compressedCtx.putImageData(sourceData, 0, 0);
            compressedOverlayCtx.drawImage(compressedCanvas, 0, 0);
            $('#description').fadeOut('slow');
            $('#results').show();
        }).attr('src', sourceCanvas.toDataURL('image/jpeg', quality*0.01)); 
}

$('html')
    .on('dragover', function(e) {e.preventDefault(); return false;})
    .on('drop', function(e) {
        var files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) {
            var file = files[0];
            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
                var reader = new FileReader();
                // Note: addEventListener doesn't work in Google Chrome for this event
                reader.onload = function (evt) {
                    sourceImg.src = evt.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
        return false;
    });

$('input').on('change', function() {
        $(this).next('.value').text($(this).val());
        quality = document.forms[0].quality.value * 1;
        scale = document.forms[0].scale.value * 1;
        if(sourceImg.src) analyzeImage(sourceImg);
    }).change();

$(sourceImg)
    .on('error', function () { alert('something went wrong when loading the image'); })
    .on('load', function () {
        _gaq.push(['_trackEvent', 'iela', 'imageAnalyzed']);
        analyzeImage(sourceImg);
    });

});

Answer 1

实际上，从 5.5 或 6 版开始，Internet Explorer 就已经支持原生拖放。它是由 Microsoft 在 1999 年指定的。HTML5 照原样接管了 API（不幸的是）。以下两个链接将为您提供有关如何使用 Native 拖放的可靠解释：

• 背景信息：http://msdn.microsoft.com/en-us/library/ms537658%28VS.85%29.aspx
• 对于跨浏览器解决方案：http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

1.5 年前，我为一家德国网络杂志写了一篇关于 HTML5 拖放的德语文章。我创建了一个跨浏览器演示。源码在github上，但是用德语注释：https://raw.github.com/tjunghans/DnD-Webstandards/master/public/article-beispiel.html

我的建议是使用库进行拖放，例如http://jqueryui.com/draggable/。它更容易，并且会让您减少头痛。

Answer 2

您可以使 IE 8 及更低版本模仿 HTML5 拖放。完成后，您可以使用 HTML5 拖放事件查看此帖子的答案（页面打开时忽略问题的标题）：

https://stackoverflow.com/a/15867951/178550

本质上，您需要侦听“selectStart”事件并调用 dragDrop() 函数才能开始。我推荐你使用 Modernizr，这样支持 HTML 5 拖放的 IE 9 及更高版本、Opera、Chrome 和 FireFox 不需要这个解决方法，不要尝试使用它。这里有一篇关于拖放 Modernizr 的问题/答案帖子：

Detecting HTML5 Drag And Drop support in javascript