'JavaScript how to check drag direction

I am trying to monitor dragStart and dragEvent javascript, in order to conclude its direction, UP or DOWN.

However i could not get any detail in arguments passed by the event -- that help to conclude.

Is there any better way to check drag direction , up or down?

Note: my problem is specifically happening at mojo javascript at webos

Thanks, -iwan

javascript drag

Solution 1:^[1]

It won't tell you the direction, but you can get the position of the element you're dragging and figure out which direction it's going.

This might be helpful: http://dunnbypaul.net/js_mouse/.

Solution 2:^[2]

You want to use dragOver. You could do something like this if you're only interested in vertical position:

Javascript:

<script type="text/javascript">
    function getPosY(event) {
      console.log(event.clientY);
    }
</script>

HTML:

<body ondragover="getPosY(event)">

EDIT: Here's a jsfiddle. Make sure your js console is open.

You could have your function compare the clientY values to determine which direction the mouse is moving.

Solution 3:^[3]

I didn't know about dragStart and dragEvent, but why not use onmousedown, onmousemove and onmouseup?

I made a modified version of http://dunnbypaul.net/js_mouse/. The direction is displayed in #status when you drag the image. Tested and works in IE5.5, IE6, IE7, IE8, Safari 5, Chrome 6 and Navigator 9. Works with Strict Doctype (probably other Doctypes also, didn't test them).

JavaScript:

var dragobj = null;
function getCurY(e) {
    if (!e) e = window.event;
    if (e.pageX || e.pageY)
        return e.pageY;
    else if (e.clientX || e.clientY)
        return e.clientY + document.body.scrollTop;
}
function drag(context, e) {
    dragobj = context;
    document.onmousedown = function() { return false };
    document.onmouseup = function() {
        if (dragobj) dragobj = null;
        document.getElementById('status').innerHTML = 'Direction: n/a';
    }
    var graby = getCurY(e);
    var oriy = dragobj.offsetTop;
    document.onmousemove = function(e) {
        if (dragobj) {
            dragobj.style.position = 'absolute';
            var newy = oriy + getCurY(e) - graby;
            var dir = newy > parseInt(dragobj.style.top, 10) ? 'down' : 'up';
            dragobj.style.top = newy + 'px';
            document.getElementById('status').innerHTML = 'Direction: ' + dir;
        }
        return false;
    }
}

HTML:

<p onmousedown="drag(this, event)">
    <img src="http://1.bp.blogspot.com/-u3FKHnFg8cA/Td56DmfliyI/AAAAAAAAAJ8/fTCFNCTs7iE/s1600/trollface%255B1%255D.jpg" alt="Trollface" />
</p>
<p id="status" style="position:absolute; top:0">Direction: n/a</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Edgar
Solution 2
Solution 3

'JavaScript how to check drag direction

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]