Click here to Skip to main content
13,251,760 members (62,723 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 30 Jul 2008

Drag and Move an Item

, 30 Jul 2008
Rate this:
Please Sign up or sign in to vote.
You can drag and move an item in the page by mouse.


1- In the style of your item (like img, div, etc...) make the position as absolute, for example:

<div style="position:absolute" id="move_id" onmousedown="mousedown()" onmouseup="mouseup()">

2- You should have a temp for describe the condition of your item. set the display as none to hide the temp. the value of this input describes the condition. The value 0 means that the item is not dragged. when your mouse is down over the item (onmousedown) this value will set by 1 to be ready for drag and move.

<input type="text" style="display:none" id="temp_id" value="0"> 

3- make the <body> like this:

<body onmousemove="mousemove();">

4- Now we can make the JavaScript functions:

<script language="javascript" type="text/javascript">
function mousedown()
    document.getElementById("temp_id").value = "1";
function mouseup()
    document.getElementById("temp_id").value = "0";
    document.getElementById("move_id").style.cursor = "default";
function mousemove()
    if (document.getElementById("temp_id").value == "1")
        document.getElementById("move_id") = event.clientY - 10;
        document.getElementById("move_id").style.left = event.clientX - 50;
        document.getElementById("move_id").style.cursor = "move";


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Re R
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Generaldoesnt work in FF3 Pin
kingvegeta10-Jan-11 3:28
memberkingvegeta10-Jan-11 3:28 
GeneralDid't work in FF3 Pin
Mohammad Dayyan30-Jul-08 13:06
memberMohammad Dayyan30-Jul-08 13:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 30 Jul 2008
Article Copyright 2008 by Re R
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid