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价值。您需要找到pageTopat mouse down 并添加/减去差异

$(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 回答