Обнаружить перетаскивание или перетащить вниз - PullRequest
Новая
       8

Обнаружить перетаскивание или перетащить вниз

0 голосов
/ 07 июля 2011

Я написал следующее: 

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');
    });
}

Я пытаюсь обнаружить перетаскивание вниз или перетаскивание вверх, но я также хочу знать, как далеко.Похоже, что это не работает правильно, а также в некоторых случаях выдает несколько предупреждений.Может кто-нибудь посоветовать мне, где я иду не так, пожалуйста.

Ответы [ 2 ]

0 голосов
/ 07 июля 2011

Почему бы не использовать: http://jqueryui.com/demos/draggable/?

Имеются следующие события:

В обработчике start вы можете сохранить положение x, y, сравнивая его каждый раз в обработчике drag и обработчике stop.

Что может оказаться полезным (а также протестировано и совместимо с различными браузерами).

0 голосов
/ 07 июля 2011

Я пошел другим путем и придумал это, которое прекрасно работает 

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);   
            }
        }
    });
}
...