Question

我写了以下内容：

var motion;
var yPosStart = 0;
var yPosEnd = 0;
var lastDrag;
var mouseDown = false;

function drag(){
    $("*")
    .mousedown(function() {
        $(window).unbind('mousedown');
        if( mouseDown === false ) {
            mouseDown = true;
            $(window).mousemove(function(e) {
                if( yPosStart == 0 ) {
                    yPosStart = e.pageY;
                }else{
                    yPosEnd = e.pageY;  
                }
            });
        }
    })
    .mouseup(function() {
        mouseDown = false;
        lastDrag = ( yPosStart < yPosEnd ? 'down' : 'up' );
        yPosStart = 0;
        yPosEnd = 0;
        alert( lastDrag );
        $(window).bind('mousedown');
    });
}

我正在尝试检测拖拽或向上拖动，但我也想知道有多远。这似乎无法正常工作，并且在某些情况下也会多次发出警报。任何人都可以告诉我我哪里出错了。

Answer 1

我采取了不同的方法，并提出了很好用的方法

var dragStart = 0;
var dragEnd = 0;
var move;

function getPosition(e) { 
    e = e || window.event; var cursor = {x:0, y:0}; 
    if (e.pageX || e.pageY) { 
        cursor.x = e.pageX; 
        cursor.y = e.pageY; 
    } else { 
        var de = document.documentElement; 
        var b = document.body; 
        cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); 
        cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0); 
    } 
    return cursor; 
}

function dragDetected( y, d ) {
    var motion = ( y > dragStart ? 'down' : 'up' );
    dragStart = 0;
    alert(motion);
}

function dragDetect(){
    $(document).mousedown(function(e){
        if( dragStart == 0 ) {
            var cursor = getPosition(e);
            move = setTimeout(function(){dragStart = cursor.y;}, 500);
        }
    });
    $(document).mouseup(function(e){
        clearTimeout( move );
        if( dragStart != 0 ) {
            var cursor = getPosition(e);
            var diff = ( cursor.y > dragStart ? cursor.y - dragStart : dragStart - cursor.y );
            if( diff >= 30 ) {
                dragDetected(cursor.y, diff);   
            }
        }
    });
}

Answer 2

为什么不使用：http://jqueryui.com/demos/draggable/？

它有以下事件：

http://jqueryui.com/demos/draggable/#event-start - 关于拖动开始
http://jqueryui.com/demos/draggable/#event-drag - 在拖动期间移动鼠标
http://jqueryui.com/demos/draggable/#event-stop - 关于阻止停止

在start处理程序中，您可以存储x，y位置，每次在drag处理程序和stop处理程序中进行比较。

这可能证明是有用的（以及经过测试和跨浏览器兼容）。

检测拖动或向下拖动

2 个答案: