JavaScript如何检查拖动方向

问题描述 投票:4回答:3

我试图监视dragStart和dragEvent javascript,以便结束它的方向,UP或DOWN。

但是我无法获得事件传递的参数的任何细节 - 这有助于得出结论。

有没有更好的方法来检查拖动方向,向上还是向下?

注意:我的问题特别发生在webos的mojo javascript上

谢谢,离开

javascript drag
3个回答
0
投票

它不会告诉你方向,但你可以得到你正在拖动的元素的位置,并找出它的方向。

这可能会有所帮助:http://dunnbypaul.net/js_mouse/


0
投票

你想使用dragOver。如果你只对垂直位置感兴趣,你可以这样做:

使用Javascript:

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

HTML:

<body ondragover="getPosY(event)">

编辑:Here's a jsfiddle。确保您的js控制台已打开。

您可以让您的函数比较clientY值以确定鼠标移动的方向。


0
投票

我不知道dragStartdragEvent,但为什么不使用onmousedownonmousemoveonmouseup

我做了http://dunnbypaul.net/js_mouse/的修改版。拖动图像时,方向显示在#status中。在IE5.5,IE6,IE7,IE8,Safari 5,Chrome 6和Navigator 9中经过测试和工作。使用严格的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>
© www.soinside.com 2019 - 2024. All rights reserved.