Geek asks and answers

Javascript event drag & drop

I am a guy from java who is trying to use my hand in javascript and need some help. I came across an awesome image upload tutorial here Mozilla tutorial and you need help with this. I am currently working on a drag and drop feature. Each time I drag an image onto my area, the mouse turns green, so it is activated. But then, when I let go, he should send me a warning saying that one image was found. However, it always just warns 0. So, the size of the array is 0. Any ideas? Thanks for watching. What I tried without success ...

  • Copying and pasting code from a tutorial into a javascript file for sure
  • Moving code to add listeners outside the function and to the onload window
  • In every browser I have

...

function toggleStrideMedia()
{
    if(getDisplay("strideMediaWrapper") == "" || getDisplay("strideMediaWrapper") == "none")
    {
        show("strideMediaWrapper");

        getElement("strideMediaDropZone").addEventListener("dragenter", dragenter, false);
        getElement("strideMediaDropZone").addEventListener("dragover", dragover, false);
        getElement("strideMediaDropZone").addEventListener("drop", drop, false);

    }
    else
    {
        hide("strideMediaWrapper");
    }
}

function dragenter(e) 
{
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) 
{
    e.stopPropagation();
    e.preventDefault();
} 

function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    // THIS SHOULD BE GIVING ME A ONE BUT IT ALWAYS GIVES ME A ZERO INSTEAD
    alert(files.length);

    handleFiles(files);
}

.

UPDATE - Script Results

enter image description here

+5
source share
1 answer

UPDATE The
actual problem turned out to be that if you try to drag images directly from one tab of the web browser to this drag and drop web interface, the event will fire, but the files will not be deleted. The responder noted this problem in OSX, and I was able to reproduce the same behavior in Windows 7.

HTML, , . ondragover/ondragenter , , , , . , drop .

, : http://jsfiddle.net/qey9G/4/

HTML

<div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; 
                                  border:1px dotted grey;">
               Drag & drop your file here...
        </div>
</div>

JavaScript

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function(event) {
    event.stopPropagation();
    event.preventDefault();
}

dropzone.ondrop= function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    alert(files.length);
}
+2

More articles:


All Articles