JavaScript Scripts





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
Free Java Script Codes
Javascript List All
Slide Show Slide Show
Ad Display Ad Display
Image Effect Image Effect
Animated Image Effects Animated Image Effects
Form Validation Form Validation
Color Picker Tool Color Picker Tool
Formatting Forms Formatting Forms
Select All Select All
Dynamic Form Select Dynamic Form select
Dynamic Color Dynamic Color
Dynamic Color Calendar
Textbox Counter Textbox Counter
Alphanumeric Alphanumeric
Date Time Script Date & Time
Stop Watch Script Stop Watch script
Delete Repeated Values Delete Repeated Values
Pagination Pagination
Random Generator Random Generator
Animated Text Animated Text
Cursor Position Cursor Position
User Info Window / User Info
Security Security / Authenticate
Bookmark Bookmark
Mouse Effects Mouse Effects
Title Bar Title Bar
Status Bar Status Bar
Country List Country List
Free Games Free Games
Calculators Calculators
 

Drag and Drop Script


About
  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
a) Converts images on a page to a draggable one.
b) Customizable Width, Height properties.
c) The script can be used only with relative and absolute elements.
b) Easy to move elements up, down, right and left.

Preview

Simply Click, Drag and Drop the image
drag-and-drop image scriptH


Code
Javascript Code

<!-- Script by hscripts.com -->

<!-- Copyright of HIOXINDIA -->

<!-- More scripts @www.hscripts.com -->



<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>


<!-- Script by hscripts.com -->

HTML Code

<style type="text/css">

        .dragme{position:relative;}

</style>



<table><tr><td align="center">

<img src="./flower.jpg" width="270" height="203" alt="drag-and-drop image script" style="cursor:move;" title="drag-and-drop image script" class="dragme"><a href="http://hscripts.com" style="text-decoration:none;cursor:pointer;font-size:12px;color:green;">H</a>

</td></tr></table>


Release Date - 18-09-2009.

Downloads:hdrag-and-drop.zip
Get free version without ©copyright link for just 5 price

For customization of this script or any script development, contact us at support@hscripts.com


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



License
- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.
Other Links

web hosting