CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Mikelo
Mikelo

Reputation: 281

jQuery UI Draggable: Drag bigger div than container

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

You can view the example of the code below here: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" });
  });

Upvotes: 3

Views: 2324

Answers (1)

Greg
Greg

Reputation: 10342

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:

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

Upvotes: 2

Related Questions