Geek asks and answers

JavaScript how to check the direction of the drag

I am trying to control dragStart and dragEvent javascript to complete its direction, UP or DOWN.

However, I could not get the details in the arguments passed by the event - which help to conclude.

Is there a better way to check the direction of the drag up or down?

Note: my problem specifically happens on javascript mojo in webos

Thanks, -iwan

+4
source share
3 answers

It will not show you the direction, but you can get the position of the element you are dragging and find out in which direction it is moving.

This may be useful: http://dunnbypaul.net/js_mouse/ .

0
source

dragOver. - , :

JavaScript:

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

HTML:

<body ondragover="getPosY(event)">

EDIT: jsfiddle. , js .

customerY, , .

0

dragStart dragEvent, onmousedown, onmousemove onmouseup?

http://dunnbypaul.net/js_mouse/. #status . IE5.5, IE6, IE7, IE8, Safari 5, Chrome 6 Navigator 9. Strict Doctype (, Doctypes ).

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>
0

More articles:


All Articles