First check out the demo below.

See the Pen EKeVXZ by Nirupam (@applegrew) on CodePen.

There are no drop targets so you won’t be able to drop it anywhere.

Code for this directive can be seen on https://github.com/applegrew/drag-dom

The basic trick applied by agDragDom, is setting a one pixel transparent gif as the drag image. Since the drag image is set based on how the image “looks” on the webpage, it has to be added to the document and should be visible. However, since it transparent and have only one pixel dimension, it remains hidden in plain sight.

The second trick was to clone the DOM being dragged and absolutely position the cloned DOM, such that it is always at a particular location with respect to the drag pointer location. If you want an effect like drag to move, and want that it should feel like the user is moving the actual DOM, then on dragstart, hide the actual DOM after cloning it.

However, as is evident from the directive code the trick is not straight forward to implement. This code works well on Chrome. On Firefox it has trouble animating drag over element which does not bubble up the dragover event. It is not tested on any other browsers as of now.