Javascript可拖动div背景

Question

我得到了一个小问题，我试图修改代码为像一天..没有成功。



问题是：012gDraggable工作良好，我可以拖动没有问题的形象..但它进一步图像让我看到蓝色的背景色。

我知道正确的是关于边界的问题，但我真的不知道..解决这个问题，我试图从图像中抓住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>