JQuery UI Draggable: drag more div than container
I was working with jQuery UI Draggable element when I got the problem. I want to be able to drag and drop a div element that is larger than the container. So I tried using position: relative to container and position: absolute on the dragged item, but it doesn't work. Basically I am trying the following: http://tech.pro/tutorial/790/javascript-tutorial-draggable-view-in-a-container
Below is the sample code below: 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" });
});
source to share
What you need to do is put negative headroom on the drag element equal to the distance between pixels, with which you can drag it out of the container. This should work regardless of whether your drag is relative or absolute position.
You probably want the negative margin to be equal to the difference between the size of the two containers, so that the dragged one always covers the parent. (This is how javascript drag / drop tools usually work.) So, in your case:
.draggable {
margin: -250px -50px;
top: 250px;
left: 50px;
}
source to share