0

私はどういうわけかこれを修正するのに苦労しています。jqueryで使用してDIVをパンしようとしています。ロジックは非常に単純です。mouseDown で X と Y を取得し、mouseMove で X と Y を減算して div をパンします。

しかし、どういうわけか、div はより速く動いており、その背後にある理由を理解できませんでした。

$('div').on('mousedown', function(e) {
    self.panStartX = e.pageX;
    self.panStartY = e.pageY;
    self.mouseDown = true;
}).on('mousemove', function(e) {
    if (self.mouseDown) {
        var pageTop = parseInt($(this).css('top'), false) || 0;
        var pageLeft = parseInt($(this).css('left'), false) || 0;
        self.panEndX = e.pageX;
        self.panEndY = e.pageY;

        if (self.panStartY > self.panEndY) {
            self.panTop = self.panEndY - self.panStartY;

            pageTop+= self.panTop;
            $(this).css({ top: pageTop });
        } else {
            // Down
            self.panTop = self.panStartY - self.panEndY;

            pageTop-= self.panTop;
            if (pageTop > 42) pageTop = 42;

            $(this).css({ top: pageTop });
        }
    }
}).on('mouseup', function(e) {
    self.mouseDown = false;
});

ここにデモがあります：http://jsfiddle.net/hvUVy/

4

2 に答える 2

2

問題は、pageTop値の計算方法にあると思います。pageTopマウスを押し下げて、差を加算/減算する必要があります

$(document).ready(function() {
    var self = {};

    $('div').on('mousedown', function(e) {
        self.panStartX = e.pageX;
        self.panStartY = e.pageY;
        self.mouseDown = true;
        self.pageTop = parseInt($(this).css('top'), false) || 0;
        self.pageLeft = parseInt($(this).css('left'), false) || 0;
    }).on('mousemove', function(e) {
        if (self.mouseDown) {
            var pageTop = self.pageTop;
            var pageLeft = self.pageLeft;
            self.panEndX = e.pageX;
            self.panEndY = e.pageY;

            if (self.panStartY > self.panEndY) {
                self.panTop = self.panEndY - self.panStartY;

                pageTop+= self.panTop;

                $(this).css({ top: pageTop });
            } else {
                // Down
                self.panTop = self.panStartY - self.panEndY;

                pageTop-= self.panTop;
                if (pageTop > 42) pageTop = 42;

                $(this).css({ top: pageTop });
            }
        }
    }).on('mouseup', function(e) {
        self.mouseDown = false;
    });
});

デモ:フィドル

于 2013-05-03T06:55:03.517 に答える
0

ifステートメントを次のように置き換えてみてください。

        $(this).css({ top:  self.panEndY - self.panStartY });            
        /*if (self.panStartY > self.panEndY) {
            self.panTop = self.panEndY - self.panStartY;

            pageTop= self.panTop;
            $(this).css({ top: pageTop });
        } else {
            // Down
            self.panTop = self.panStartY - self.panEndY;

            pageTop= self.panTop;
            if (pageTop > 42) pageTop = 42;

            $(this).css({ top: pageTop });
        }*/
于 2013-05-03T06:56:56.820 に答える