Window Title
Window body. Cat black

How to make a draggable dialog box in JavaScript

Let's make a draggable dialog box in JavaScript. I've already made it in React, but I'll make it in plain JavaScript here to illustrate that frameworks aren't really necessary for this kind of programming. But, they can be nice to help with organization. Bootstrap already has a nice modal window component, but the user can't move this one around the screen. Also, I don't want this window to be modal: the user should still be able to do other things on the screen when it's open. So let's make a new one from scratch.

The DOM is pretty similar to what you'd do in Bootstrap. The svg here is for the X button to close the window.

<div class="window" id="window">
    <div class="window-bar">
        <div>Window Title</div>
        <span class="window-close">
            <svg viewport="0 0 12 12" version="1.1"
                 width="16" height="16"
                 xmlns="http://www.w3.org/2000/svg">
                <line x1="1" y1="11"
                      x2="11" y2="1"
                      stroke="black"
                      strokeWidth="2"/>
                <line x1="1" y1="1"
                      x2="11" y2="11"
                      stroke="black"
                      strokeWidth="2"/>
            </svg>
        </span>
    </div>
    <div class="window-body">
        Window body
    </div>
</div>

For a demo, open the window here:

And here's the CSS and source code:

The React version, with some extra application-specific things, is here: Window.jsx.