jquery - 如何在没有 jquery UI 的情况下制作可拖动的背景？

Question

这是我一直在尝试使用的代码：

$(document).ready(function() {
    var cc = 0;
    var drag = false;
    var bgp = 10;

    $('body').mousedown(function(){
        var bg =  Number($('body').css('background-position-x').replace(/[^-\d\.]/g, ''));
        bgp =+ bg;
        drag = true;
    });

    $('body').mouseup(function(){
        drag = false;
    });

    $('body').mousemove(function(e){
         $(this).mousedown(function(){
             cc =+ e.pageX;
         });
         if (drag==true) {
             cc =+ e.pageX;
         }

        function pan() {
             $('body').css('background-position',bgp+cc);
        } 

        if(drag==true) {
             pan();
        }
    });
});

它有点工作，但不是根据您移动鼠标的距离来更改背景位置，而是根据鼠标距页面左边缘的距离设置背景位置。

我如何解决这个问题的想法是将背景设置为原始位置+鼠标单击时拖动鼠标的位置。虽然如果有一种完全不同的方法来解决这个问题，那也很好。

我正在尝试自学 jquery，所以我愿意批评我的代码

Answer 1

捕获 mousedown 动作的起始位置和初始背景位置（x 和 y）：

var startX = event.pageX;
var startY = event.pageY;
var initialX = parseInt($('body').css('background-position-x'));
var initialY = parseInt($('body').css('background-position-y'));

在你的 mousemove 事件中，捕捉你的 startX 和你的movedX 之间的区别

var differenceX = startX - e.pageX;
var differenceY = startY - e.pageY;

然后将这些差异添加到您的初始背景位置 x 和 y。

$('body').css('background-position-y', (initialY + differenceY));
$('body').css('background-position-x', (initialX + differenceX));