Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting boundary limits for a draggable object

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?

like image 280
Paul Avatar asked Oct 10 '09 11:10

Paul


People also ask

How do I limit a draggable area?

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.

How do you make an object draggable?

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.

What is UI draggable?

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.


1 Answers

Use the containment option:

$('.myList').draggable({
    axis: 'y',
    containment: 'parent'
});
like image 131
moff Avatar answered Oct 20 '22 05:10

moff