Drag and Move an Item

Re R

Rate me:

2.83/5 (3 votes)

29 Jul 2008CPOL

25.3K

You can drag and move an item in the page by mouse

Download source code - 777 B

Introduction

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

HTML

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

You should have a temp for describing 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.
HTML
```
<input type="text" style="display:none" id="temp_id" value="0"> 
```
Make the <body> like this:
JavaScript
```
<body onmousemove="mousemove();">
```

Now we can make the JavaScript functions:

JavaScript

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

Written By

Re R

Web Developer

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

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

Drag and Move an Item

Introduction

License

Comments and Discussions