Javascript拖放离开无法正常工作

Question

Javascript拖放离开无法正常工作

Vla*_*lad 1 javascript jquery drag-and-drop

我正在尝试实现拖放图像上传类似功能到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>?

Run Code Online (Sandbox Code Playgroud)

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();
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Han*_*año 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>?

Run Code Online (Sandbox Code Playgroud)

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;
}?

Run Code Online (Sandbox Code Playgroud)

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);
}?

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，8 月前
查看次数：	1677 次
最近记录：	12 年，8 月前