0

私は次の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;      
}

JS

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


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

JSBin を使用したデモ

でドラッグ可能な子 div を持つ「内部」 div background-image。
内側の div にはoverflow:hidden. 必要なのは、画像全体をスクロールできるように画像のドラッグを制限することですが、画像を「内側」の div から完全にドラッグしないようにする必要があります (画像の一部は常に表示されたままにする必要があります)。

boundsそれがdivを追加した理由です。bounds画像の動きを制限できる divの寸法と位置を定義するにはどうすればよい ですか。

私が書くことができるように

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

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

4

1 に答える 1

1

でdivを作成する必要があります

-画像の幅のまま

top as -画像の高さ

幅 * 2 + ビューポートの幅 (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/

于 2013-05-29T17:18:10.410 に答える