jquery - Javascript drag and drop on leave doesn't work correctly - Stack Overflow

IT技术

更新时间：2025-04-254

admin管理员组
文章数量:1430026

I am trying to implement a drag and drop image upload similar functionality to imgur. You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.

My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.

You can see the problem in action here: JS Fiddle, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.

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 code:

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

I am trying to implement a drag and drop image upload similar functionality to imgur.. You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.

My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.

You can see the problem in action here: JS Fiddle, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.

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 code:

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

Share Improve this question edited Dec 20, 2012 at 19:20 asked Dec 20, 2012 at 19:12 Vlad 7218 silver badges13 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

Hey hopefully you found an answer to this, if not here is a little example that looks like imgur in my oppinion, using your code.

jsFiddle: http://jsfiddle/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);
}

This sample uses timers, but it is active only when something is being dragged into the form. I am certainly going to use this in the future.

I actually found another solution, I think it's a bit simpler because it doesn't use setInterval. And I've implemented the actual drag and drop functionality for anyone interested.

The whole working example with drag and drop functionality is available below.

jsFiddle - Demo: http://jsfiddle/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);

本文标签： jqueryJavascript drag and drop on leave doesn39t work correctlyStack Overflow

版权声明：本文标题：jquery - Javascript drag and drop on leave doesn't work correctly - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745557199a2663258.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

jquery - Javascript drag and drop on leave doesn't work correctly - Stack Overflow

2 Answers 2

更多相关文章