Moving absolute layer

alirezaok

i have this html code:

<div id="floatdiv" style="   

    position:absolute;   

    width:200px;height:50px;left:0px;top:0px;   

    padding:16px;background:#FFFFFF;   

    border:2px solid #2266AA; cursor:move;">   

This is a floating javascript menu.   

</div>
 tehran (historically also rendered as Kazvin, Kasvin, Casbeen, and Casbin in the West) is a city in Iran, some 165 km northwest of Tehran, in tehran Province. It is at an altitude of about 1800 meters above sea level, and is a city with a cold but dry climate being south of the rugged Alborz range.

when you run this html code you see when mouse go on absolute layer it changed to moving courser. but it can not move location of this layer. any one can change this code to adding ability moving absolute layer with mouse?

dougal85

To change the position when its absolute you need to modify the top, right, bottom and/or left values.

Is this what your doing? You've not shown us the code for moving the div, so I'm a bit stuck 😉

By move with the mouse, do you mean drag and drop?

alirezaok

yes i mean drag and drop

dougal85

There are plenty of tutorials and examples if you just google'd around.

for example; http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

You may however want to use a javascript library to make this process a bit easier. There are many that are very good;

http://script.aculo.us/
http://mootools.net/
http://dojotoolkit.org/
http://jquery.com/
http://developer.yahoo.com/yui/

alirezaok

your example link is so good but it use of relative posation. when i change it to absolute posation script does not work right.

where of this script must be change?

dougal85

it worked when i changed;

.drag { position: relative; }

.drag { position: absolute; }