Click here to Skip to main content
12,447,096 members (52,462 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked

Drag and Move an Item

, 29 Jul 2008 CPOL
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 2:28
memberkingvegeta10-Jan-11 2:28 
GeneralDid't work in FF3 Pin
Mohammad Dayyan30-Jul-08 12:06
memberMohammad Dayyan30-Jul-08 12: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.

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