0

我正在开发拖放库,我想将鼠标的位置变化添加到拖动元素的实际位置,而不是仅仅将其位置设置为窗口中的当前光标位置。这将允许我不使用 position: fixed 并能够拖动位置相对/绝对;元素。

要知道鼠标的旧位置(在调用 mousemove 处理程序之前),我可以使用 e.pageX 和 pageY 将位置存储在上一次调用该处理程序的变量中。但是第一次移动鼠标处理程序呢?当我还没有存储旧位置时,如何知道旧鼠标位置以确定它的变化?

一段代码:

    var $dragged = null,
        $window = $(window),
        oldMouseX = null,
        oldMouseY = null;

    var mouseMoveHandler = function(e) {
        var curTop = $dragged.css('top'),
            curLeft = $dragged.css('left');
        $dragged.css({
            top  : curTop + e.pageY - oldMouseY,
            left : curLeft + e.pageX - oldMouseX,
        });
        oldMouseX = e.pageX;
        oldMouseY = e.pageY;
    };

    $('.Draggable')

        .attr('draggable', true)

        .css({userSelect: 'none'})

        .on('mousedown', function() {
            $dragged = $(this);
            $window.bind('mousemove', mouseMoveHandler);
        })
        .on('mouseup', function() {
            $dragged = null;
            $window.unbind('mousemove', mouseMoveHandler);
        })
4

0 回答 0