2009-01-15 20:17:49 +00:00
<!doctype html>
< html lang = "en" >
< head >
2009-01-15 21:57:33 +00:00
< title > jQuery UI Draggable - Constrain movement< / title >
2009-01-15 20:17:49 +00:00
< link type = "text/css" href = "../../themes/base/ui.all.css" rel = "stylesheet" / >
< script type = "text/javascript" src = "../../jquery-1.3.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.draggable.js" > < / script >
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< style type = "text/css" >
2009-01-15 21:57:33 +00:00
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2 { margin-bottom:20px; }
2009-01-15 20:17:49 +00:00
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
2009-01-15 21:57:33 +00:00
#containment-wrapper { width:100%; height:150px; border:2px solid #ccc; }
2009-01-15 20:17:49 +00:00
< / style >
< script type = "text/javascript" >
$(function() {
$("#draggable").draggable({ axis: 'y' });
$("#draggable2").draggable({ axis: 'x' });
2009-01-15 21:57:33 +00:00
$("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });
$("#draggable4").draggable({ containment: '#demo-frame' });
$("#draggable5").draggable({ containment: 'parent' });
2009-01-15 20:17:49 +00:00
});
< / script >
< / head >
< body >
< div class = "demo" >
2009-01-15 21:57:33 +00:00
< h3 > Constrain movement along an axis:< / h3 >
2009-01-15 20:17:49 +00:00
2009-01-15 21:57:33 +00:00
< div id = "draggable" class = "draggable ui-widget-content" >
2009-01-15 20:17:49 +00:00
< p > I can be dragged only vertically< / p >
< / div >
2009-01-15 21:57:33 +00:00
< div id = "draggable2" class = "draggable ui-widget-content" >
2009-01-15 20:17:49 +00:00
< p > I can be dragged only horizontally< / p >
< / div >
2009-01-15 21:57:33 +00:00
< h3 > or to within another DOM element:< / h3 >
< div id = "containment-wrapper" >
< div id = "draggable3" class = "draggable ui-widget-content" >
< p > I'm contained within the box< / p >
< / div >
< div id = "draggable4" class = "draggable ui-widget-content" >
< p > I'm contained within the box's parent< / p >
< / div >
< div class = "draggable ui-widget-content" >
< p id = "draggable5" class = "ui-widget-header" > I'm contained within my parent< / p >
< / div >
< / div >
2009-01-15 20:17:49 +00:00
< / div > <!-- End demo -->
< div class = "demo-description" >
< p >
2009-01-15 21:57:33 +00:00
Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the < strong > axis< / strong > option to limit the draggable's path to the x- or y-axis, or use the < strong > containment< / strong > option to specify a parent DOM element or a jQuery selector, like 'document.'
2009-01-15 20:17:49 +00:00
< / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
