Click here to Skip to main content
Click here to Skip to main content

Drag and Move an Item

By , 29 Jul 2008
Rate this:
Please Sign up or sign in to vote.

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)

About the Author

Re R
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
Generaldoesnt work in FF3 Pinmemberkingvegeta10-Jan-11 2:28 
GeneralDid't work in FF3 PinmemberMohammad Dayyan30-Jul-08 12:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web02 | 2.8.140421.2 | Last Updated 30 Jul 2008
Article Copyright 2008 by Re R
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid