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 Action 的开始位置和您的初始背景位置(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));