2010-03-12 03:18:34 +00:00
<!DOCTYPE html>
2009-01-15 20:17:49 +00:00
< html lang = "en" >
< head >
2010-09-10 13:17:58 +00:00
< meta charset = "utf-8" >
2009-01-15 21:57:33 +00:00
< title > jQuery UI Draggable - Constrain movement< / title >
2010-09-10 13:17:58 +00:00
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2012-03-22 13:45:22 +00:00
< script src = "../../jquery-1.7.2.js" > < / script >
2010-09-10 13:17:58 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.widget.js" > < / script >
2012-01-21 03:08:37 +00:00
< script src = "../../ui/jquery.ui.interaction.js" > < / script >
2010-09-10 13:17:58 +00:00
< script src = "../../ui/jquery.ui.draggable.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< style >
2009-02-27 04:06:52 +00:00
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
2009-01-15 21:57:33 +00:00
#draggable, #draggable2 { margin-bottom:20px; }
2009-01-15 20:17:49 +00:00
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
2010-09-10 13:17:58 +00:00
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
2009-01-15 20:17:49 +00:00
< / style >
2010-09-10 13:17:58 +00:00
< script >
2012-01-31 01:57:52 +00:00
$(function() {
$( "#draggable" ).draggable({
drag: function( event, ui ) {
2012-01-29 00:34:29 +00:00
ui.position.left = ui.originalPosition.left;
2012-01-21 03:08:37 +00:00
}
2012-01-31 01:57:52 +00:00
});
$( "#draggable2" ).draggable({
drag: function( event, ui ) {
ui.position.top = ui.originalPosition.top;
}
});
2009-01-15 21:57:33 +00:00
2012-01-21 03:08:37 +00:00
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
2010-09-10 13:17:58 +00:00
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( "#draggable5" ).draggable({ containment: "parent" });
2009-01-15 20:17:49 +00:00
});
< / script >
< / head >
< body >
2010-09-10 13:17:58 +00:00
2009-01-15 20:17:49 +00:00
< div class = "demo" >
2009-01-15 21:57:33 +00:00
2009-01-16 20:17:45 +00:00
< h3 class = "docs" > Constrain movement along an axis:< / h3 >
2012-01-22 19:55:09 +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-16 20:17:45 +00:00
< h3 class = "docs" > Or to within another DOM element:< / h3 >
2009-01-15 21:57:33 +00:00
< 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 -->
2010-09-10 13:17:58 +00:00
< div class = "demo-description" >
2012-01-31 01:57:52 +00:00
< p > Constrain the movement of each draggable by defining the boundaries of the draggable area. The < code > containment< / code > option allows you to specify any element to use as a containing box; you can pass any selector or the string "parent".< / p >
< p > The draggable element can also be constrained with custom logic inside a drag event handler. Modifying the < code > ui.position< / code > object's < code > left< / code > and/or < code > top< / code > properties will change where the element will be positioned. In this example, we're forcing the top or left to always be the same as where it started, resulting in the element being confined to a specific axis.< / p >
2009-01-15 20:17:49 +00:00
< / div > <!-- End demo - description -->
2010-09-10 13:17:58 +00:00
2009-01-15 20:17:49 +00:00
< / body >
< / html >
