Drag and Drop Script

A simple javascript used to move images on a web page. Use this script to create drag and drop applications on your pages. Try dragging the image below by a mouse click.

Features

Converts images on a page to a draggable one.
Customizable Width, Height properties.
The script can be used only with relative and absolute elements.
Easy to move elements up, down, right and left.

Preview

Simply Click, Drag and Drop the image

Downloads

Javascript Code

<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top= nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj= nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0,10);
ty = parseInt(dobj.style.top+0,10);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>

HTML Code

Release Date - 18-09-2009
Downloads : hdrag-and-drop.zip
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Download and Unzip Drag and Drop image script and execute drag-and-drop.html file. or
Just Copy and paste the javascript code into your HTML page.
Set the Height and Width properties as per your requirement.
Make the images draggable using this script.
This move script is compatible with IE and Firefox.
Free download.