如何制作具有背景位置和百分比值的可拖动背景图像？

<div class="background-image"></div>

.background-image {
  background-image: url(图片地址);
  background-position: left top;
  background-size: cover;
  width: 100%;
  height: 100%;
}

var elem = document.querySelector('.background-image');
var dragging = false;
var posX, posY, mouseX, mouseY;

elem.addEventListener('mousedown', function(e) {
  dragging = true;
  posX = elem.scrollLeft;
  posY = elem.scrollTop;
  mouseX = e.clientX;
  mouseY = e.clientY;
});

elem.addEventListener('mouseup', function() {
  dragging = false;
});

elem.addEventListener('mousemove', function(e) {
  if (dragging) {
    var dx = e.clientX - mouseX;
    var dy = e.clientY - mouseY;
    elem.scrollTop = posY - dy;
    elem.scrollLeft = posX - dx;
  }
});