Javascript jquery-图像大于容器时可拖动的图像

当图像大于容器时，使图像可拖动会做一些非常奇怪的事情。。。有人知道怎么解决这个问题吗

这是我的密码

<script type='text/javascript' src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("img").draggable({ containment: "div", scroll: false });

    });

</script>

<style type="text/css">
    div {
        width:500px; 
        height:423px; 
        position:relative; 
        overflow:hidden;
    }
</style>

$（文档）.ready（函数（）{
$（“img”）.draggable（{containment:div，scroll:false}）；
});
div{
宽度：500px；
身高：423px；
位置：相对位置；
溢出：隐藏；
}

而且

<div>
    <img src="images/map.jpg" width="1000" height="845" alt="Map" />
</div>

---

我不确定您是否正确使用了draggable。它的目的是拿起图像放在某个地方。如果图像比容器大，你怎么知道你把它放在哪里？这与您希望抓取图像并在拖动时使容器滚动不同

现在，也就是说，我认为这是一个bug（或者可能是一个特性？），如果内部元素更大，它会使外部边缘捕捉到容器边缘

---

单击并拖动鼠标时，是否尝试滚动地图？

如果手动设置边界，则会正常工作：

$("img").draggable({ containment: [0, 0, 500, 423], scroll: false });

---

我选择通过执行以下操作，根据父级和子级大小动态设置包容，JSFIDLE：

$（函数（）{
$（“div[id='dragx']）。可拖动({
拖动：函数（事件、ui）{
var parent=ui.helper[0].parentNode；
var dragWidth=ui.helper[0].clientWidth；
var parentWidth=parent.clientWidth；
var dragHeight=ui.helper[0].clientHeight；
var parentHeight=parent.clientHeight；
var widthDifference=dragWidth-parentWidth；
var heightDifference=dragHeight-父高度；
如果（ui.position.left>0）ui.position.left=0；
否则如果（ui.position.left<-widthDifference）ui.position.left=-widthDifference；
如果（ui.position.top>0）ui.position.top=0；
否则如果（ui.position.top<-heightDifference）ui.position.top=-heightDifference；
}
});
});

快到了！您需要设置负边界。。。这项工作：$（“img”）.draggable（{containment:[-500，-422,0,0]，scroll:false}）；汤姆，你救了我的命。谢谢你，好先生！我永远也猜不到。

$(function () {
    $("div[id='dragx']").draggable({
    drag : function(event,ui){
      var parent = ui.helper[0].parentNode;

      var dragWidth = ui.helper[0].clientWidth;
      var parentWidth = parent.clientWidth;
      var dragHeight = ui.helper[0].clientHeight;
      var parentHeight = parent.clientHeight;

      var widthDifference = dragWidth - parentWidth;
      var heightDifference = dragHeight - parentHeight;

      if(ui.position.left > 0) ui.position.left = 0;
      else if(ui.position.left < -widthDifference) ui.position.left = -widthDifference;

      if(ui.position.top > 0) ui.position.top = 0;
      else if(ui.position.top < -heightDifference) ui.position.top = -heightDifference;

      }
    });
});