在这种情况下如何限制可拖动的 div答案

【问题标题】：How to restrict the draggable div in this case在这种情况下如何限制可拖动的 div
【发布时间】：2013-05-29 16:53:23
【问题描述】：

我有以下html结构：

HTML

<div id="outer">
    <div id="inner">
      <div id="bounds">
        <div id="myimage">        
        </div>
      </div>
    </div>
  </div>

CSS

#outer
{
  border: solid 1px red;
  padding: 50px 30px 50px 30px;
  float: left; 
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
  overflow:hidden;
  position:relative;
}

#myimage
{
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg');
  background-position : 0,0;
  background-repeat:no-repeat;
  width: 648px;  /*TODO : size will be dynamic*/
  height: 438px; /*TODO : size will be dynamic*/
  position:relative;      
}

$("#myimage").draggable(); //{ containment: "#bounds" }


//$("#bounds").width();  //? value
//$("#bounds").height(); //? value
//$("#bounds").css("left",""); //? value
//$("#bounds").height("top","");? value

Demo with JSBin

具有background-image 的可拖动子 div 的“内部”div。
内部 div 有overflow:hidden。我需要的是限制图像的拖动，所以整个图像可以滚动，但图像不应该完全拖出“内部”div（图像的某些部分必须始终保持可见）。

这就是我添加 bounds div 的原因。我如何定义尺寸和位置 bounds div 让我可以限制图像的移动。

这样我会写

$("#myimage").draggable({ containment: "#bounds" });

http://api.jqueryui.com/draggable/#option-containment

【问题讨论】：

标签： javascript jquery jquery-draggable

【解决方案1】：

你需要用

创建一个div

左为图像的宽度

top as -height of your image

width as width * 2 + view port(300)的宽度

高度为高度 * 2 + 视口高度（300）

html

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="bounds">        
        </div>
        <div id="myimage">        
          <div>


    </div>
  </div> 
</body>
</html>

css

#outer
{
  border: solid 1px red;
  padding: 50px 30px 50px 30px;
  float: left; 
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
  overflow:hidden;
  position:relative;
}

#myimage
{
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg');
  background-position : 0,0;
  background-repeat:no-repeat;
  width: 648px;
  height: 438px;
  position:relative;

}

javascript

var imgwidth = "648";
var imgheight = "438";
$("#bounds").css({
  position:"absolute",
  left: -imgwidth + 10,
  top:-imgheight + 10,
  width: imgwidth * 2 + 300 - 20,
  height:imgheight * 2 + 300 - 20,
  }
                     );
$("#myimage").draggable({ containment: "#bounds" });

检查这个垃圾箱

http://jsbin.com/atavub/14/

【讨论】：

是的，但我希望它根据图像的尺寸是动态的。
我们为什么需要containment div？是否可以调整bounds div 的大小
现在已经做到了。检查新垃圾箱
我检查了你的链接，图像没有从任何地方传出去。我在代码中添加的 -10 是左边距和上边距。应分别从宽度和高度中减去相同的双倍。
边界 div 从 -832 和 -559 开始，将您的图像放入其中需要您为图像提供 832 和 559 的左侧，以便它出现在视口内。为了避免这种情况，我把它变成了兄弟姐妹。而且由于它是一个兄弟，没有位置：绝对，边界和图像将出现在另一个之下并且不会相互重叠，这是我们的要求。