jQuery UI可拖动：拖动比容器大的div

Question

jQuery UI可拖动：拖动比容器大的div

3

我正在使用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" });
  });

- Mikelo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

您需要做的是在可拖动元素上设置负边距，其大小应等于它可以被拖动到容器外部的像素距离。无论您的可拖动元素相对或绝对定位，这都应该起作用。

可能，您希望负边距等于两个容器大小之间的差异，以便可拖动元素始终覆盖父容器。（这通常是JavaScript拖放/裁剪工具的工作方式。）因此，在您的情况下：

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