Jquery: doesn't support drop event?

Question

I want add a event handler to drop event, my first try is to use jquery 1.9.1

var dropIt = function (e) {
    console.log(e);
    console.log(e.dataTransfer);
    e.stopPropagation();  
    e.preventDefault(); 
}

     $('#drop-area').on('drop',dropIt);

but this can't print the e.dataTransfer, when I use the origin:

$('#drop-area')[0].addEventListener('drop', dropIt, false);

it can work?

why this happen?

Possible duplicate: using jquery .on for drop events when uploading files from the desktop? — Boaz
– Boaz, Commented Mar 4, 2013 at 4:56
@KyelJmD: I don't want use the jquery ui, I want use html5 drag and drop — hh54188
– hh54188, Commented Mar 4, 2013 at 4:56

Musa · Accepted Answer · 2013-03-04 05:03:29Z

2

jQuery does not automatically normalize the dataTransfer property, you'll have to do it manually. E.g.

jQuery.event.props.push("dataTransfer");

answered Mar 4, 2013 at 5:03

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipesh Parmar · Accepted Answer · 2013-03-04 05:06:41Z

Try

$(document).on('drop','#drop-area',dropIt);

OR

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        <script type="text/javascript">
            function allowDrop(ev)
            {
                ev.preventDefault();
            }

            function drag(ev)
            {
                ev.dataTransfer.setData("Text",ev.target.id);
            }

            function drop(ev)
            {
                ev.preventDefault();
                var data=ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <p>Drag the W3Schools image into the rectangle:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br />
        <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </body>
</html>

Collectives™ on Stack Overflow

Jquery: doesn't support drop event?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related