Javascript - Dragging a Window
Using just standard Mouse Events

When designing dialog boxes, it is important to provide a way for the user to be able to drag them around the screen. It turns out that this was a significant problem which took several days to solve.

I know that the 4 windows on this page are on top of the text. However, this is not a problem since they can all be moved - just drag the dark blue bar with the mouse. In a finished product, they will be a part of dialogboxes that appear and disappear depending on user input.

The windows on this page just use standard mouse events. On another page, I tried to use the HTML drag method, but that failed with Firefox and produced unacceptable results with Chrome in Windows 10.

Using only mouse events, the motion was ok (though a bit jerky with Firefox on Windows XP) but sometimes the mouse would slip out of the div and begin highlighting the text on the page. This is particularly bad using Firefox on Windows XP. I was able to fix most of the problems by placing a temporary div on top of everything, allowing it to process the mouse move events, and moving the window under it (see Div inside div 2). This is pretty smooth in all 4 Windows 10 browsers I tested, and with Chrome on Windows XP, but still real choppy with Firefox on XP.

When you look at the source, each section below has the style and code needed for that example.

Simple div

There is no background div for this example. When you move the mouse too fast, the cursor will slip out and you will see the page's text highlighted. This is the main reason the background div was added.
Simple div

Simple div with background

This example adds a background div and keeps it below the movable window. Fast mouse moves still cause problems, but no longer highlight the page's text.

Initially, the background div has a blue color and a z-index of -1, so that it is below everything. When the Simple div with background window is clicked (when the mouse button is released), the color is removed. This implementation is just to help with testing the various implementations and is not how I use the code in actual components.

Simple div with background

Div inside div

This example is more like a dialog box with a title bar used to control the move. It still keeps the background div below the window. When the cursor "leaks out", it frequently re-enters the title bar at a different location than where it started. When it leaks into the body of the movable window, it gets stuck there. That is why the next example has a div in front of the window.
Div inside div
This has a large <div> under the window to catch the mouse when it leaks out. Unfortunately, the mouse can get caught in this section under the Title Bar.

Div inside div 2

This is the one that works. Using a pointer to various move routines was necessary because I was testing several designs on this page - 2 simple div's, a single background div, and 2 with a title bar div inside a larger window. (The fourth window does not use the extra div.) In a final design, this pointer will not need to exist.

Also, because several designs are on this page, all the style definitions are tied to individual id's. In a generic library, they will be tied to classes.

In addition, the background/foreground div has a color and opacity just for test. Those may also be removed in a final library. (The color goes away when the Simple div with background window is clicked.)

Div inside div 2
This has a large <div> over the window so there is no way the mouse can "leak out". This works best!
Even though this last example is the best, I have kept all 4 just to show the progression of how I developed this solution and to demonstrate the various problems each technique presented.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Dragging_a_Window_with_Mouse.html