jQuery UI Draggable：拖动比容器更大的div

I was working with the jQuery UI Draggable element when I encountered a problem. I want to be able to drag a div element which is larger than the container. So I tried to use position:relative on the container and the position:absolute on the draggable element but it doesnt work. Basically what I am trying to accomplish is this: http://tech.pro/tutorial/790/javascript-tutorial-draggable-view-in-a-container

当我遇到问题时,我正在使用jQuery UI Draggable元素。我希望能够拖动一个大于容器的div元素。所以我尝试在容器上使用position:relative,在可拖动元素上使用position:absolute但它不起作用。基本上我想要完成的是:http://tech.pro/tutorial/790/javascript-tutorial-draggable-view-in-a-container

You can view the example of the code below here:http://bit.ly/1qhVxqJ

您可以在此处查看以下代码示例:http://bit.ly/1qhVxqJ

My code:

External

<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" });
  });

1 个解决方案

#1

What you need to do is put a negative margin on the draggable element, equal to the pixel distance by which it can be dragged outside the container. This should work whether your draggable is position relative or absolute.

您需要做的是在可拖动元素上放置一个负边距,等于它可以在容器外拖动的像素距离。无论您的可拖动位置是相对位置还是绝对位置,这都应该有效。

Probably, you want the negative margin to be equal to the difference between the size of the two containers, so that the draggable always covers the parent. (This is how javascript drag/crop tools generally work.) So in your case:

也许,您希望负边距等于两个容器大小之间的差异,以便可拖动总是覆盖父级。 (这是javascript拖动/裁剪工具通常的工作方式。)所以在你的情况下:

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