Build jQuery UI Position - Default functionality in JavaScript

Description

The following code shows how to build jQuery UI Position - Default functionality.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Position - Default functionality</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--from  w w  w.j  a  v  a  2 s .  com-->
<style>
#parent {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
}
#positionable1 {
width: 75px;
height: 75px;
}
#positionable2 {
width: 120px;
height: 40px;
}
select, input {
margin-left: 15px;
}
</style>
<script>
$(function() {
function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}

$( ".positionable" ).css( "opacity", 0.5 );

$( "select, input" ).bind( "click keyup change", position );

$( "#parent" ).draggable({
drag: position
});

position();
});
</script>
</head>
<body>

<div id="parent">
<p>
This is the position parent element.
</p>
</div>

<div class="positionable" id="positionable1">
<p>
to position
</p>
</div>

<div class="positionable" id="positionable2">
<p>
to position 2
</p>
</div>

<div style="padding: 20px; margin-top: 75px;">
position...
<div style="padding-bottom: 20px;">
<b>my:</b>
<select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="my_vertical">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div style="padding-bottom: 20px;">
<b>at:</b>
<select id="at_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="at_vertical">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div style="padding-bottom: 20px;">
<b>collision:</b>
<select id="collision_horizontal">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
<select id="collision_vertical">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
</div>
</div>

<div class="demo-description">
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br>Drag around the parent element to see collision detection in action.</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Build jQuery UI Position - Default functionality in JavaScript

Home »
  Javascript Tutorial »
    jQuery UI »
      Draggable

Build jQuery UI Position - Default function...

Build jQuery UI Position - Image Cycler in ...
Change cursor for draggable tag in JavaScri...
Handle drag and drop events: activate, deac...
Handle drag start and stop events in JavaSc...
Handle droppable accepted event in JavaScri...
Set Drag delay distance in JavaScript
Set cursor position for the draggable in Ja...
Set to Drag along a grid in JavaScript
Set to fly back in JavaScript
Set to only draggable along with axis y in ...
Set to only draggable inside parent in Java...
Snap to another for draggable in JavaScript