JSWindows (a JavaScript Inheritance Demo) Drag Listener

© 2013, Martin Rinehart


The JSWindows (a JavaScript Inheritance Demo) windows may be moved by dragging the title, resized by dragging the sides and corners. The Drag Listener class simplifies the coding by burying the complexities. OOP afficionados call this "encapsulation." Old-timers call it "modular" programming.

In concept, dragging is simple. If you get a mousedown event on a draggable part, you start dragging. Then you respond to mousemove events by making an appropriate adjustment in the size or position of the window being dragged. (No need to worry about drop zones for window drags.)

In practice, however, it's not that simple. The DOM API fires mousemove events much faster than the cumbersome DOM API can respond. We need to "speed up" our JavaScript in a couple ways to simulate continuous dragging.

First, we create a queue for mouse events. We can stuff them into this queue as fast as they arrive; process them as time permits.

Second, we note that "processing" really means updating x,y coordinates. Dragging the right side? Update the width. Dragging the lower-right corner? Update width and height. Top? Update the top and height, and so on. We also note that these are all adjustments to the pos_size and that changing the pos_size is foolish if your next action is to change the pos_size again. You can take the last entry from the mouse event queue and discard the rest. Ergo a special queue. Incoming? Empty the queue and add the new event.

Feedback: MartinRinehart at gmail dot com

# # #