how to drag the widget to only one axis

jquery draggable widget
jquery draggable widget allow elements to be moved using the mouse. This widget is in interactions category on the jQuery UI website.
http://jqueryui.com/draggable/
Consider the following HTML
<div id="draggableDiv" class="divClass">
Drag me around
</div>
.divClass {
height: 200px;
width: 200px;
background-color: red;
color: white;
display:table-cell;
vertical-align:middle;
text-align:center;
}	if we write the parent div, we will get border for that
To make the above div element draggable
$('#draggableDiv').draggable();	using mouse we can drag that element
Some of the useful options to customize the draggable widget
axis - Constrains dragging to either x or y axis	limit the direction in x-axis only - axis: 'x'
containment - Constrains dragging to within the bounds of the specified element or region	drag upto some area or element
cursor - The CSS style of the cursor during the drag operation	change the cursor to arrow or had
opacity - opacity during the drag operation	decrease or increase during drag
revert - Boolean property that specifies if the element should revert to its start position when dragging stops	when the dragging stops it comes to ist
revertDuration - The duration of the revert animation, in milliseconds
snap - Specifies whether the element being dragged should snap to other elements. Value can be boolean or a selector. When set to true, the element will snap to all other draggable elements. When a selector is specified the element being dragged will snap to the element specified by the selector	if it reaches nearer to parent element or some border, means 50 percennt comes inside, it will automatically come inside
snapTolerance - The distance in pixels between the element being dragged and the element to which to snap to, at which snapping should occur.
cancel - Prevents dragging from starting on specified elements
Constrains dragging to x axis
$('#draggableDiv').draggable({
axis : 'x'
});
Constrains dragging to within the bounds of the parent element
HTML
<div id="containerDiv" style="height:300px; width:300px; border:3px solid black">
<div id="draggableDiv" class="divClass">
Drag me around
</div>
</div>
jQuery
$('#draggableDiv').draggable({
containment : 'parent'
});
Changes the cursor style to "move" during the drag operation
$('#draggableDiv').draggable({
cursor: 'move'
});
Changes the opacity to 0.3 during the drag operation
$('#draggableDiv').draggable({
opacity : '0.3'
});
Reverts the div element to its start position when dragging stops. Revert animation completes in 1000 milli-seconds.
$('#draggableDiv').draggable({
revert: true,
revertDuration : 1000
});
The following example
1. Snaps the coloured div elements to the div element with thick black border.
2. The snapping occurs as soon as the distance between any of the coloured div element and the div element with thick black border is 50 pixels
3. The cancel option cancels dragging from starting on the div element with thick black border
HTML
<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>
<div id="greeDiv" class="divClass" style="background-color: green">
Green Div
</div>
<div id="blueDiv" class="divClass" style="background-color: blue">
Blue Div
</div>
<div id="brownDiv" class="divClass" style="background-color: brown">
Brown Div
</div>
<br />
<br />
<div id="snapDiv" style="height: 400px; width: 400px; border: 5px solid black">
</div>
Style
.divClass {
height: 200px;
width: 200px;
color: white;
display: table-cell;
vertical-align: middle;
text-align: center;
}
jQuery
$('div').draggable({
snap: '#snapDiv',	captures
snapTolerance: 50,	how much percentage snaps
cancel : '#snapDiv'	parent is not want drag, cacel snap div,all  div element draggable, so id snapdiv not draggable
});
jquery draggable widget
In this video we will discuss
1. How to keep draggable element always on top of other draggable elements on the page
2. How to bring the element on top of other draggable elements on the page as soon as the mouse down event is triggered
Consider the following code
HTML
<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>
<div id="greeDiv" class="divClass" style="background-color: green">
Green Div
</div>
<div id="blueDiv" class="divClass" style="background-color: blue">
Blue Div
</div>
<div id="brownDiv" class="divClass" style="background-color: brown">
Brown Div
</div>
CSS
<style>
.divClass {
font-family:Arial;
height: 150px;
width: 150px;
color: white;
display: table-cell;
vertical-align: middle;
text-align: center;
z-index:0
}
</style>
jQuery
$(document).ready(function () {
$('.divClass').draggable();
});
All the div elements on this page are draggable. The problem here is that, when you drag Red Div it does not stay on top of other draggable div elements on the page. Green Div on the other hand stays on top of Red Div but stays below Blue and Red Div elements. This is the default behaviour.
// Draggable element on top.png
To bring a Div Element that is being dragged on top of other draggable div's on the page, use stack option. The way this works is jQuery sets the z-index of the element that is being dragged to higher than the z-index of any other draggable div element on the page. You can see the value of the z-index in browser developer tools.
$(document).ready(function () {
$('.divClass').draggable({
stack: '.divClass'	drag on div class , we can drag on top only
});	if stack we not mentioned, it will drag on beneath
});
However, if you simply click on a Div element without dragging then the element is not brought on to the top. Here is the code to bring the element on top as soon as mousedown event is triggered. All this function does is change the z-index of the div element to a value greater than the z-index of any other div element.
$(document).ready(function () {
$('.divClass').draggable();
$('.divClass').mousedown(function () {	if we mouse down, any box which is beneat of any element, if we mouse down, it will come uo
var maxZindex = 0;
$(this).siblings('.divClass').each(function () {
var currentZindex = Number($(this).css('z-index'));
maxZindex = currentZindex > maxZindex ? currentZindex : maxZindex;
});
$(this).css('z-index', maxZindex + 1);	using stack it drags on top only,
});
});
draggable axis draggable containment cursor opacity revert revertduration draggable draggable draggable mousedown each siblings css css how to drag the widget to only one axis how to change the cursor style in draggable how to change the opacity while dragging the widget how to go to original position when drag stops how to drag theparent how to drag the top elemetn only