我有一个我想在DIV类中包含的可拖动项目。我有以下代码
html:
<div class = 'right'>
<div id = 'frame1'>
<iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe>
</div>
</div>
CSS:
.right {
position: absolute;
width: 60%;
height: 100%;
left: 25%;
top: 20%;
background-color: #006400;
}
#frame1 {
position: absolute;
float: left;
width: 45%;
height: 75%;
top: 10%;
left: 2%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
#frame2 {
position: absolute;
float: right;
width: 45%;
height: 75%;
top: 10%;
right: 2%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
#frame3 {
position: absolute;
float: center;
width: 45%;
height: 75%;
top: 10%;
left: 25.5%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
#iframe1 {
width: 181%;
height: 182%;
top: 50%;
left: 50%;
zoom: 1.00;
-moz-transform: scale(0.55);
-moz-transform-orgin: 0 0;
-o-transform: scale(0.55);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.55);
-webkit-transform-origin: 0 0;
}
javaScript:
$("#frame1, #frame2, #frame3").draggable({containment: ".right", stack: "div"});
可拖动的项目在DIV类的左侧和顶部边界的移动中受到限制,但是对于我可以将对象移至右侧或底部的距离似乎没有限制。我需要更改代码以获取DIV类的所有四个方面包含的可拖动选项?
jsfiddle在这里
是的,只需为您的iFrame更新以下CSS即可。我希望这将帮助您获得DIV类的所有四个方面的可拖动选项。
#iframe1 {
position: absolute;
width: 181%;
height: 182%;
zoom: 1.00;
-moz-transform: scale(0.55);
-moz-transform-orgin: 0 0;
-o-transform: scale(0.55);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.55);
-webkit-transform-origin: 0 0;
}
在这里,我已经更新了JSFIDDLE。