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>

```
The standard Drag and Drop API is widely recognized to [suck big hairy donkey balls](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html). So I wouldn't recommend doing it from scratch. But since that's your question, there are one set of requirements for making something draggable, and one set of requirements for properly setting up a drop zone:

Dragging:

* The dom node must have the "draggable" property set to true

Note: `e.dataTransfer.setDragImage` can be used to set an alternate drag image (the default is a transparent image of the dom node being dragged.

Note2: `e.dataTransfer.setData` can be used inside the `dragstart` event to set some data that can be gotten back from the drop event.

Dropping:

* In the `dragover` event, `e.preventDefault` must be called
* In the `drop` event, `e.preventDefault` must be called

Example:

```
<body>
    <div id="dragme" draggable="true">Drag Me</div>
    <div id="dropzone">Drop Here</div>
</body>

<script>
    var dragme = document.getElementById('dragme')
    var dropzone = document.getElementById('dropzone')

    dragme.addEventListener('dragstart',function(e){
        dropzone.innerHTML = "drop here"
    })

    dropzone.addEventListener('dragover',function(e){
        e.preventDefault()
    })
    dropzone.addEventListener('drop',function(e){
        e.preventDefault()
        dropzone.innerHTML = "dropped"
    })
</script>

```

However, there are a whole lot of gotchas in using this API, including that:

* it takes a lot of work to distinguish between a `dragmove` event over a dropzone and a `dragmove` event related to a draggable item
* `dragmove` fires even if your mouse isn't moving
* `dragleave` and `dragenter` fire even if your mouse isn't moving in or out of the listening dom node (it fires whenever it crosses a child-parent bounary for some stupid reason)
* And more..

A better way
------------

I wrote a drag and drop library that makes it a ton easier to use the standard drag and drop API without all those gotchas. Check it out here:

<https://github.com/fresheneesz/drip-drop>