moving a div - styled cursor:move

Question

Hello

I have a div for which i have set the cursor:move style. The div shows up as a modal popup window. I would like to let the user move the div around.

<style>
.popup{cursor:move;position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin:auto;}
</style>

<div id="modaldiv" style="popup">
   content goes here
</div>

Any help is greatly appreciated.

Thanks.

Answer 1

You might want to look at http://dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm
or
http://dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

Answer 2

If you need the basic idea then it will be like this.

1. A flag should be set when the mousedown occurs.

2. If the flag is set and mousemove occurs then change the position of the div according to the mouse position.

3. Unset the flag when mouseup occurs.

From this I don't think it is much harder to develop one.

If you need one based on a framework then this one will help you. Using jQuery

Draggable

$("#modaldiv").draggable();

will make the div draggable.

Answer 3

this should work http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm i think this is what you want to do :-?