如何限制在這種情況下，可拖動的div

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

一個「內部」div有一個可拖動子div與background-image。
內部div有overflow:hidden。我需要的是限制圖像的拖動，以便整個圖像可以滾動，但圖像不應該完全從「內部」div中拖出（圖像的某些部分必須始終保持可見狀態）。

這就是爲什麼我加了bounds股利。我如何定義div的尺寸和位置，這使我能夠限制圖像的移動。

，這樣我可以寫

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

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

來源

2013-05-29 Amitd

您需要創建一個div

留給-width圖像的

頂部，-height你的形象

寬度爲寬* 2 +寬度爲vie瓦特端口（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" });

結帳這個bin

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

來源

2013-05-29 17:18:10

是的，但我希望它是動態的基於圖像的尺寸。 – Amitd

編輯答案 –

爲什麼我們需要一個'遏制'div的任何理由？是否有可能調整「邊界」div而不是 – Amitd

如何限制在這種情況下，可拖動的div

回答

相關問題