JavaScript how to check drag direction_问答_开发者

开发者 https://www.devze.com 2023-03-10 16:13 出处：网络

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

H开发者_如何学运维owever 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

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>

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/.

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.

JavaScript how to check drag direction

精彩评论

关注公众号

热门标签

图文推荐

JavaScript how to check drag direction

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：