Question

我在某种程度上努力解决这个问题。我正在尝试使用jquery来平移DIV。逻辑非常简单。在mouseDown上，我得到X＆amp; Y并减去X＆amp; Y on mouseMove to pan the 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/

Answer 1

我认为问题是你如何计算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;
    });
});

演示：Fiddle

Answer 2

尝试将 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 }); }*/

在javascript / jquery中ping一个div

2 个答案: