JavaScript如何检查拖拽方向

Question

JavaScript如何检查拖拽方向

javascriptdrag

13

我正在尝试监控Javascript的dragStart和dragEvent事件，以确定它的方向，是向上还是向下。

然而，我无法获得事件传递的任何详细信息 -- 这有助于做出结论。

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

注意：我的问题发生在WebOS的mojo Javascript中。

谢谢， -iwan

- iwan

移动上或下是什么意思？UP是否意味着元素的y位置值比dragStart事件时更小？还是它意味着元素的y位置值比上一个dragEvent时更小？ - Andrej Slivko

嗯，我认为你们两个提到的都可以（如果有效）...将确定我是向上滚动还是向下滚动... - iwan

3个回答

0

它不会告诉你方向，但是你可以获取正在拖动的元素位置并且找出它前进的方向。

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

- Edgar

0

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

Javascript：

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

HTML：

<body ondragover="getPosY(event)">

编辑：这里是一个 jsfiddle。确保你的 js 控制台已经打开。

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

- squidbe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Midas · Accepted Answer

我之前不知道有 dragStart 和 dragEvent，但是为什么不使用 onmousedown、onmousemove 和 onmouseup 呢？

我制作了一个修改版的 http://dunnbypaul.net/js_mouse/。当你拖动图像时，方向会显示在 #status 中。已经在 IE5.5、IE6、IE7、IE8、Safari 5、Chrome 6 和 Navigator 9 中测试并且可用。适用于 Strict Doctype（可能也适用于其他 Doctype，但我没有测试过）。

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>