Dragging a window using mouse events

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.

Note:

When setting breakpoints in Firefox, the mouse gets into a state where you can no longer click on anything. In windows XP, the solution is to right click on one of the icons at the bottom of the screen - that resets the cursor so that the mouse is usable. Simply changing the top window (application) via Alt-Tab does not work because the old mouse cursor is simply cached and restored. Clicking on the icons keeps the "mouse is not available" icon from being restored. Unfortunately, in Windows 10 - you're screwed. I was not able to find a way to recover the mouse. (Sometimes, F5 appears to work.)

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.

It moves a div on top of everything with z=5
The mouse move event is attached to the top div
The mouse button up event is also attached to the top div
2 properties are set on the top div during mousedown
- A pointer to the drag bar object
- A pointer to the custom move routine
The tracking uses a better algorithm - it saves the location of the mouse with respect to the window on mouse down and then sets the new window position based on that and the current mouse position.

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

Javascript - Dragging a Window Using just standard Mouse Events

Simple div

Simple div with background

Div inside div

Div inside div 2

URL: http:// mc-computing.com / Languages / Javascript / Dragging_a_Window_with_Mouse.html

Javascript - Dragging a Window
Using just standard Mouse Events