jQuery UI的可拖動：不是容器

Question

我是用jQuery UI的可拖動的元素工作時，我遇到了一個問題將更大格。我想能夠拖動比容器大的div元素。於是，我就用位置：容器和位置上相對的：在拖曳的元素，絕對，但它不工作。基本上，我想做到的是這樣的：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" }); 
    }); 

Answer 1

你需要做的就是把拖曳的元素，陰性切緣，等於像素距離通過它可以拖動在容器外面。無論您的可拖動位置是相對位置還是絕對位置，這都會起作用。

也許，你要負利潤率等於兩個容器的尺寸之間的差別，從而使可拖動總是覆蓋父。 （這是JavaScript拖/裁剪工具通常的工作方式。）所以在你的情況下：

.draggable { 
    margin: -250px -50px; 
    top: 250px; 
    left: 50px; 
}