Question

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

我的问题是，当我在h1标签内拖动实际单词'upload'时，屏幕会闪烁。发生这种情况是因为我有一个dragleave事件用上传h1标签删除overlay 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();
});

Answer 1

嘿希望你找到了答案，如果不是这里的一个小例子看起来像我的意见中的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);
}

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

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

Javascript拖放离开无法正常工作

2 个答案: