Question: It should be a combination of CSS and JavaScript. The steps to do should be:

1. Make it on top of all other elements (which property to specify?)
2. Catch the event when it is clicked (which event to listen to?)
3. Move the div as mouse moves.

But what are the details?

Answer: 
HTML5 Drag and Drop
===================

If you are reading this in the year 2017 or later, you might want to have a look at the HTML5 Drag and Drop API:

<https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API>

Example:

```
<!DOCTYPE HTML>
<html>
<head>
    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <style>
        .draggable {
            border: 1px solid black;
            width: 30px;
            height: 20px;
            float: left;
            margin-right: 5px;
        }
        #target {
            border: 1px solid black;
            width: 150px;
            height: 100px;
            padding: 5px;
        }
    </style>
</head>
<body>

    <h1>Drag and Drop</h1>

    <h2>Target</h2>
    <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <h2>Draggable Elements</h2>
    <div id="draggable1" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable2" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable3" class="draggable" draggable="true" ondragstart="drag(event)"></div>

</body>
</html>

```
Yeah, you can use jQuery if you want a bloated library with far more functions than you need! Or if you want to be more of an elitist, use [Waltern Zorn's drag and drop library](http://www.walterzorn.com/dragdrop/dragdrop_e.htm), which is one tenth of the size.