Question

我知道IE不支持html5 dragover，除了IE 9.我复制粘贴我的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
对于crossbrowser解决方案：http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

我在1.5年前写了一篇关于HTML5拖放的德国文章。我创建了一个crossbrowser演示。源代码在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

从本质上讲，你需要倾听＆＃34; selectStart＆＃34;事件并调用dragDrop（）函数来启动事物。我建议您使用Modernizr，以便IE 9及更高版本，支持HTML 5拖放的Opera，Chrome和FireFox不需要此解决方法，不要尝试使用它。这里有关于拖放Modernizr的问题/答案帖子：

Detecting HTML5 Drag And Drop support in javascript

html5 dragover无法在IE 5.5中工作到IE 8

2 个答案: