Geek Answers Handbook

Understanding HTML 5 drag and drop events

I do not understand why the return value for the coordinate of the mouse click in the event of a drag event is always 0 or a negative value before releasing the mouse.

I prepared an example where a user dragstartwhose mouse position is correct is the same for end dragend... but if you look at the console for drag, you will see a dragendnegative value in front of it.

Is the usual behavior? What for? I need to avoid this value of 0. any solutions?

http://jsfiddle.net/gg8gLpg0/

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
    #test {
        position: absolute;
        width: 100px;
        height: 100px;    
        background-color:red;
    }
        </style>

    </head>
    <body>
        <div id="test" draggable="true">test</div>
        <script>
        var elm = document.getElementById('test');

        elm.addEventListener('drag', function (event) {
            //console.log(event.clientX);
            //console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('dragstart', function (event) {
            console.log('start');
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('drag', function (event) {
            console.log('during drag');// PROBLEM HERE
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('dragend', function (event) {
            console.log('end');
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));


        </script>

    </body>
    </html>
+4
source share
1 answer

Firefox 0. , "mousemove" , .

jsfiddle.net/qgedt70a/

Mozilla , clientX , screenX - , 0 jsfiddle.

. , , - ?

0

More articles:


All Articles