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

Stats

16.7K views
226 downloads
22 bookmarked
Posted

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.

Introduction

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").style.top = event.clientY - 10;
        document.getElementById("move_id").style.left = event.clientX - 50;
        document.getElementById("move_id").style.cursor = "move";
    }
}
</script

License

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

Share

About the Author

Re R
Web Developer
United States United States
No Biography provided

You may also be interested in...

Pro
Pro

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