1

我正在尝试实现与 imgur.com 类似的拖放图像上传功能。您从桌面拖动图像，当您拖动文档时，会出现一个带有“上传”字样的大覆盖 div。

我的问题是，当我拖动 h1 标签内的实际单词“上传”时，屏幕会闪烁。发生这种情况是因为我有一个 dragleave 事件来删除带有上传 h1 标签的覆盖 div 但是我不知道如何修复它。

您可以在此处看到问题的实际效果：JS Fiddle，只需将任何图像从桌面拖到文档并将鼠标悬停在“上传”一词上，您就会看到我在说什么。任何帮助，将不胜感激。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body>
        <div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
    </body>
</html>​

Javascript代码：

$(document).on('dragover', function () {
    $('#upload-global-drop-overlay').css({'display': 'block'});
});


$('#upload-global-drop-overlay').on('dragleave', function () {
    $('#upload-global-drop-overlay').css({'display': 'none'});
});

$(document).on('drop', function (e) {
    $('#upload-global-drop-overlay').css({'display': 'none'});
    e.preventDefault();
});

​</p>

4

2 回答 2

5

嘿，希望你找到了答案，如果不是，这里有一个小例子，在我看来，它看起来像 imgur，使用你的代码。

jsFiddle：http: //jsfiddle.net/JUBwS/74/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body>
        <div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
    </body>
</html>​

CSS：

#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}

#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}​

Javascript：

var isDragging = null;
$(document).on('dragover', function () {
    if(isDragging==null)
        doDrag();

    isDragging = true;
});

$(document).on('drop', function (e) {
    e.preventDefault();
    isDragging = false;
});

$(document).on('dragleave', function (e) {
    isDragging = false;
});

var timerId=0;
function doDrag()
{
  timerId = setInterval(function()
  {
    if(isDragging)
        $('#upload-global-drop-overlay').fadeIn(500);
    else
    {
        $('#upload-global-drop-overlay').fadeOut(500);
        isDragging = null;
        clearInterval(timerId);
    }
  },200);
}​

此示例使用计时器，但它仅在将某些内容拖入表单时才处于活动状态。我肯定会在未来使用它。

于 2012-12-20T20:21:12.340 回答
2

我实际上找到了另一个解决方案，我认为它更简单一些，因为它不使用 setInterval。我已经为任何感兴趣的人实现了实际的拖放功能。

下面提供了具有拖放功能的整个工作示例。

jsFiddle - 演示：http: //jsfiddle.net/6SV9P/1/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body>
        <div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1</div>
        <div id="image"></div>
    </body>
</html>​

CSS：

#upload-global-drop-overlay {
    background: none repeat scroll 0 0 #424242;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: .8;
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    z-index: 10001;
    display: none;
}

#upload-global-drop-overlay h1 {
    font-size: 72pt;
    display: block;
    position: absolute;
    line-height: 50px;
    top: 50%;
    left: 50%;
    margin: -82px 0 0 -180px;
    text-shadow: 3px 3px 4px black;
    color: white;
    z-index: -1;
}​

JS：

var dragDropFromDesktop = (function ($) {
    $(document).on('dragenter', function () {
        $('#upload-global-drop-overlay').fadeIn(200)
    });

    $('#upload-global-drop-overlay').on('dragleave', function (e) {
        if (e.originalEvent.pageX < 10 || e.originalEvent.pageY < 10 || $(window).width() - e.originalEvent.pageX < 10 || $(window).height - e.originalEvent.pageY < 10) {
            $("#upload-global-drop-overlay").fadeOut(200);
        }
    });

    $('#upload-global-drop-overlay').on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    // Handle dropped image file - only Firefox and Google Chrome
    $('#upload-global-drop-overlay').on('drop', function (e) {
        $('#upload-global-drop-overlay').fadeOut(200);
        var files = e.originalEvent.dataTransfer.files;
        if (files === undefined) {
            alert('Your browser does not support file Drag and Drop!')
        } else {
            var file = files[0];
            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var img = new Image();
                    img.src = evt.target.result;
                    $('#image').html('<img src="' + img.src + '">');

                };
                reader.readAsDataURL(file);
            }
        }
        e.preventDefault();
        e.stopPropagation();
    });

})(jQuery);​
于 2012-12-21T18:04:45.000 回答