JavaScript: How to make draggable HTML-element
drag me
The box above can be dragged. It works in IE, Opera, FireFox.
Code:
<DIV
style="position:absolute;width:100px;height:100px;background:#EEEEEE;border:1px solid black"
onmousedown="startdrag(this, event);"
>drag me</DIV>
<SCRIPT>
//mouse down on dragged DIV element
function startdrag(t, e) {
if (e.preventDefault) e.preventDefault(); //line for IE compatibility
e.cancelBubble = true;
window.document.onmousemoveOld = window.document.onmousemove;
window.document.onmouseupOld = window.document.onmouseup;
window.document.onmousemove=dodrag;
window.document.onmouseup=stopdrag;
window.document.draged = t;
t.dragX = e.clientX;
t.dragY = e.clientY;
return false;
}
//move the DIV
function dodrag(e) {
if (!e) e = event; //line for IE compatibility
t = window.document.draged;
t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";
t.dragX = e.clientX;
t.dragY = e.clientY;
return false;
}
//restore event-handlers
function stopdrag() {
window.document.onmousemove=window.document.onmousemoveOld;
window.document.onmouseup=window.document.onmouseupOld;
}
</SCRIPT>
Tell me if you have easer way to do it.
Thanks.
|
Category: JavaScript |
|
GOOD
Posted by 202.65.148.94 on September 06, 2008 at 10:15 AM GMT+03:00 #
This is just what I was looking for!, Works really good!! thanks!!
Posted by ryan on September 23, 2008 at 09:55 AM GMT+03:00 #
we can use ondrag event !
Posted by 122.169.89.189 on October 04, 2008 at 08:51 AM GMT+03:00 #
GOOD,its very useful,its working good.
Posted by Ravindra on October 30, 2008 at 11:59 AM GMT+03:00 #
Thanks very much the code was really good
Posted by shilpa on November 20, 2008 at 01:23 PM GMT+03:00 #
Good sample.
I add the ability to see the cursor mouse as 'move' during the drag.
enjoy:
<SCRIPT>
// drag area script , any area , working very well , Also the cursor style changed
//mouse down on dragged DIV element
function startdrag(t, e) {
if (e.preventDefault) e.preventDefault(); //line for IE compatibility
e.cancelBubble = true;
window.document.onmousemoveOld = window.document.onmousemove;
window.document.onmouseupOld = window.document.onmouseup;
window.document.onmousemove=dodrag;
window.document.onmouseup=stopdrag;
window.document.draged = t;
t.dragX = e.clientX;
t.dragY = e.clientY;
return false;
}
//move the DIV
function dodrag(e) {
if (!e) e = event; //line for IE compatibility
t = window.document.draged;
t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";
t.dragX = e.clientX;
t.dragY = e.clientY;
t.style.cursor = 'move';
return false;
}
//restore event-handlers
function stopdrag() {
window.document.onmousemove=window.document.onmousemoveOld;
window.document.onmouseup=window.document.onmouseupOld;
t = window.document.draged;
t.style.cursor = 'auto';
}
</SCRIPT>
<DIV style="position:absolute;" onmousedown="startdrag(this, event);">
<table width=100 border=1><tr><td>drag me</td><tr></table>
</DIV>
Posted by j.r on December 19, 2008 at 05:59 PM GMT+03:00 #
Posted by MyNetFaves : Web 2.0 Social Bookmarking on January 08, 2009 at 11:34 PM GMT+03:00 #
How can you make the div that is dragged be a title?
Ex:
(script here)
<div style="width: 50px; height: 100px; border: 1px solid #000000" id="holder">
<div style="width: 50px; height: 20px" id="title"
onmousedown="startdrag(this, event);">
Title
</div>
<div style="width: 50px; height: 80px" id="content">Content
</div>
</div>
(end example)
Every time I do just that, it doesn't move, and I don't want people to drag the content. I only want them to drag the title.
Posted by D.E. on June 08, 2009 at 01:05 AM GMT+03:00 #
This is pure genius. Thank you! This is a perfect slim code for anyone building small widgets for sites and perhaps need that little extra thing to improve the user experience! You are great
Posted by Kristoffer on June 29, 2009 at 01:32 PM GMT+03:00 #
Wonder full!!!!!!!!!!!
Posted by Eng.. Semere Hailu on September 09, 2009 at 06:39 PM GMT+03:00 #