I have two elements:
1. A parent of fixed height, overflow:hidden
2. Its child, of larger fixed height.
<style type="text/css">
.myList {list-style:none; margin:0px; padding:1px;}
.myList li{ height:50px; margin:4px; padding:2px;}
.dragPanel {height:230px; border:solid; overflow:hidden;}
</style>
<div class="dragPanel">
<ul class="myList">
<li>1</li>
<li>2</li>
... ....
<li>8</li>
<li>9</li>
</ul>
</div>
I want to be able to drag the list up and down within the parent div. I am using the jquery ui draggable plugin to achieve verticle dragging, but I am unsure how to constrain the list within the parent div.
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dragPanel').addClass("hover");
$('.myList').draggable({ axis: 'y' });
});
</script>
How would I go about setting verticle upper and lower limits for the posistion of the list?
Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.
Use the containment option:
$('.myList').draggable({
axis: 'y',
containment: 'parent'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With