Make anything draggable in webpage without Jquery
Published by Aslam
Make anything draggable in your webpage by following this simple steps.
Draggable means that something we can drag from one point to another point.
What we need is only 3kb javascript code.
Step 1
Download script,and link to webpage in between head tag.
example :
<head>
<script src='./javascript/draggable.js' type='text/javascript'>
</script>
</head>
Step 2
Assign a unique ID to element you wish to enable draggingand
Put this line at bottom of the webpage.
<script type='text/javascript'>
new dragElement(ELEMENT ID);
</script>
Replace ELEMENT ID WITH the element id you wish to enable dragging.
Important: You should set that element's position attribute to 'absolute' or 'fixed'.
Else it will not work!
For example, If i wish to make my div with an id of #MyDiv,
Then i will have to change it's position attribute in css,
#MyDiv{
position:absolute;
}
Or
#MyDiv{
position:fixed;
}
Then your second javascript code will look like this.
<script type='text/javascript'>
new dragElement(MyDiv);
</script>
If you want to make another draggable element with an id #MyDiv2, just add
new dragElement(MyDiv2);
and so on.
It will look like
<script type='text/javascript'>
new dragElement(MyDiv);
new dragElement(MyDiv2);
</script>
Step 3
All set now. but it is (Dragging) not smooth as we expected.
So we will have to solve it with CSS
<style type='text/css'>
*{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style
The above css code will make all transitions on the page smoother than before.If you decide to apply this transition easeness only on draggable elements, remove star, and type draggable elements id ,sperated with commas(,).
For example .
<style type='text/css'>
#MyDiv,#MyDiv2 {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style>
This is just a simple script that makes any HTML element draggable - aslamise.blogspot.com
Comments
Post a Comment