1

ドラッグアンドドロップの画像アップロードと同様の機能をimgur.comに実装しようとしています。デスクトップから画像をドラッグすると、ドキュメント上をドラッグすると、「アップロード」という単語が付いた大きなオーバーレイdivが表示されます。

私の問題は、h1タグ内の実際の単語「upload」をドラッグすると画面がちらつくことです。これは、dragleaveがupload 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 に答える