Javascript可拖动div背景

Question

我遇到了一个小问题，我试图将代码修改一天之久，但是没有成功。



问题是：Draggable效果很好，我可以毫无问题地拖动图像..但是图像甚至使我看到背景色的蓝色。

我知道正确是关于边界的问题，但是我真的不知道要解决该问题，我试图从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>