遇到问题时，我正在使用jQuery UI Draggable元素。我希望能够拖动一个大于容器的div元素。因此，我尝试在容器上使用position：relative，在可拖动元素上使用position：absolute，但它不起作用。基本上，我想要完成的是：http : //tech.pro/tutorial/790/javascript-tutorial-draggable-view-in-a-container
您可以在此处查看下面的代码示例：http : //bit.ly/1qhVxqJ
我的代码：
外部的
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
的CSS
.draggable {
width: 750px;
height: 750px;
padding: 0.5em;
float: left;
position: absolute;
background: #6C6;
border:2px solid #fff;
}
#containment-wrapper {
height:500px;
width:700px;
background: #000;
margin-top:250px;
margin-left:500px;
border:2px solid #ccc;
position:relative;
overflow:hidden;
}
的HTML
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm contained within the box</p>
</div>
</div>
jQuery的
$(function() {
$( "#draggable3" ).draggable({ cursor: "move", containment: "#containment-wrapper" });
});
您需要做的是在可拖动元素上放置一个负边距，等于可以将其拖动到容器外的像素距离。无论您的可拖动对象是相对位置还是绝对位置，这都应该起作用。
可能您希望负边距等于两个容器的大小之差，以便可拖动对象始终覆盖父对象。（这是javascript拖放工具通常的工作方式。）因此，在您的情况下：
.draggable {
margin: -250px -50px;
top: 250px;
left: 50px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句