Javascript 可拖动 div 背景

Question

我遇到了一个小问题，我试了一天修改代码……但没有成功。



问题是: 可拖动效果很好，我可以毫无问题地拖动图像..但图像更进一步让我看到背景颜色的蓝色。

我知道 right 是关于边界的问题，但我真的不知道如何解决这个问题，我试图从 Image 中获取 X 和 Y 但没有成功。

$(document).ready(function(){
var $bg = $('.bg-img'),
    data = $('#data')[0],
    elbounds = {
        w: parseInt($bg.width()), 
        h: parseInt($bg.height())
    },
    bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h},
    origin = {x: 0, y: 0},
    start = {x: 0, y: 0},
    movecontinue = false;

function move (e){
    var inbounds = {x: false, y: false},
        offset = {
            x: start.x - (origin.x - e.clientX), 
            y: start.y - (origin.y - e.clientY)
        };

    data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
        start.x = offset.x;
        start.y = offset.y;

        $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
}

function handle (e){
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
        origin.x = e.clientX;
        origin.y = e.clientY;
        movecontinue = true;
        $bg.bind('mousemove', move);
    } else {
        $(document.body).focus();
    }

    e.stopPropagation();
    return false;
}

function reset (){
    start = {x: 0, y: 0};
    $(this).css('backgroundPosition', '0 0');
}

$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});

示例代码:https://jsfiddle.net/zt1jjzqL/3/

Answer 1

这里我只修改了一些东西；

• 计算图像尺寸的新函数
• 计算图像可以向左和向上移动的最远距离。
• 用这些限制向上和向左的移动。

$(document).ready(function() {
  var $bg = $('.bg-img'),
    data = $('#data')[0],
    elbounds = {
      w: parseInt($bg.width()),
      h: parseInt($bg.height())
    },
    bounds = {
      w: 2350 - elbounds.w,
      h: 1750 - elbounds.h
    },
    origin = {
      x: 0,
      y: 0
    },
    start = {
      x: 0,
      y: 0
    },
    movecontinue = false;
  bgSize($bg, function(w, h) { //act on and store the most up and left
    console.log(`image dimensions => width:${w}, height:${h}`);
    $bg.data("mostleft", (elbounds.w * -1) + w);
    $bg.data("mostup", (elbounds.h * -1) + h);
  });


  function move(e) {
    var inbounds = {
        x: false,
        y: false
      },
      offset = {
        x: start.x - (origin.x - e.clientX),
        y: start.y - (origin.y - e.clientY)
      };

    data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
      // ensure that up and left are limited appropriately
      start.x = offset.x < ($bg.data("mostleft") * -1) ? ($bg.data("mostleft") * -1) : offset.x;
      start.y = offset.y < ($bg.data("mostup") * -1) ? ($bg.data("mostup") * -1) : offset.y;

      $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
  }

  function handle(e) {
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
      origin.x = e.clientX;
      origin.y = e.clientY;
      movecontinue = true;
      $bg.bind('mousemove', move);
    } else {
      $(document.body).focus();
    }

    e.stopPropagation();
    return false;
  }

  function reset() {
    start = {
      x: 0,
      y: 0
    };
    $(this).css('backgroundPosition', '0 0');
  }

  $bg.bind('mousedown mouseup mouseleave', handle);
  $bg.bind('dblclick', reset);
});
//function to accurately calculate image size.
function bgSize($el, cb) {
  $('<img />')
    .load(function() {
      cb(this.width, this.height);
    })
    .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}

div.bg-img {
  background-image: url(http://i.imgur.com/ZCDMWnX.gif);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: blue;
  border: 1px solid #aaa;
  width: 500px;
  height: 250px;
  margin: 25px auto;
}

p,
#data {
  text-align: center;
}

#data {
  background: red;
  font-weight: bold;
  color: white;
  padding: 5px;
  font-size: 1.4em;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img"></div>
<p>
  <input type="text" id="data" />
</p>