You can use this method on your blog to make any item drag-able.
can you see this bunch of code
<div>
<img src=".jpg" alt="earth" title="earth" id='divStyle' />
</div>
so insert your elements which need to be dragged instead image.
and make its name divStyle.
Copy paste onto note pad and save it with .html extension.
that's all.
Don't steal my codes without my permission.
By CORE/ 2010/05/20 Originally was written
Made on Elakiri.com on 2011/08/01
can you see this bunch of code
<div>
<img src=".jpg" alt="earth" title="earth" id='divStyle' />
</div>
so insert your elements which need to be dragged instead image.
and make its name divStyle.
Copy paste onto note pad and save it with .html extension.
that's all.
Don't steal my codes without my permission.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type='text/css'>
#divStyle{
position:absolute;
//background-color:red;
//width:50px;
//border:solid 2px;
//border-color:black;
cursor:pointer;
}
</style>
<script type='text/javascript'>
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
function mouseDown(event)
{
//check the browser
if(window.event)//for IE browser
{
//get the event trigged object
ObjEvent = event.srcElement;
}else if(event.which)
{
//for FF/Safari/Opera/ browser
ObjEvent = event.target;
}
//check it got the appropriate object
if(ObjEvent.id = "divStyle" )
{
//then get the left top positions of the object
objLeft = parseInt(ObjEvent.style.left);
objTop = parseInt(ObjEvent.style.top);
//get the mouse pointer's positions on the screen but on the object
cltX = event.clientX;
cltY = event.clientY;
//then call for the move event when it's needed
document.onmousemove = mouseMove;
}
return false;
}
function mouseMove(event)
{
//get the current location of the moving
currentX = event.clientX;
currentY = event.clientY;
//set the new location of the object which will be redraw in each time when items is being moved
ObjEvent.style.left = objLeft+(currentX - cltX )+ "px";
ObjEvent.style.top = objTop+(currentY - cltY)+ "px";
return false;
}
function mouseUp(event)
{
document.onmousemove = null;//cancel the moving
return false;
}
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
</script>
</head>
<body>
<div>
<img src=".jpg" alt="earth" title="earth" id='divStyle' />
</div>
<script type='text/javascript'>
//set the initial location
ObjEvent = document.getElementById("divStyle");
ObjEvent.style.left = "100px";
ObjEvent.style.top = "150px";
</script>
</body>
</html>Made on Elakiri.com on 2011/08/01
Last edited:
oops haha I removed that image 
Keep posting..
