Как сделать перетаскиваемый фон без 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

Capture начальная позиция вашего MouseDown действия и вашего первоначального фона позиции (х и у):

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; 

Затем добавить эти различия в вашей начальной позиции фона-х и у.

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