Javascript - Dragging a Window
using the HTML Drag Type

On a previous page, I attempted to move a window using the HTML 5 drag interface. It was a complete failure. After creating that, I discovered hints on how to control what is displayed during the drag operation. My intent was to try and

This page provides examples to test those ideas.

The final result is clear - don't waste your time trying to use the HTML 5 standard drag interface - it simply doesn't work!

New Approach

The main problem with the drag interface is that it is experimental! (See note at the bottom of this page.) Translation - Only a fool would try to use it.
(The main purpose of these pages is to document why it is not ready to be used. A solution that actually works is documented here.)

Once something you try fails, re-reading the documents may help to explain why or give you new ideas of what to try. That is what happened here - After the dismal failure detailed here, re-reading mozilla's Recommended Drag Types / Dragging HTML and XML made more sense. I mistakenly thought it describes a different method to control what is displayed during the drag operation. Combined with information contained in HTML5 Drag and Drop (, I created this page to test that approach.

Hint - This was also a failure!

Additional reading uncovered a technique that actually worked - it showed the entire window being dragged, not just the title bar - but it still showed a ghost. Yet another failure.

Code for the drop target

For the examples on this page, this is the code for the drop target - the document. It just disables the defaults.

Simple div

Just a simple div using HTML 5 drag support. I really don't like the "ghost" object.
Simple div - Position set in *onDragEnd*

setData - "text/html"

Mozilla's Recommended Drag Types / Dragging HTML and XML states Seems pretty straight forward - set the value to what you want to display and it should just work.
setData - "text/html"
Window with a title bar
text/html is set
Only the title bar displays during a drag

Since changing the representation of a simple window might look the same as the default, a more complex window is used. Then, as suggested by Mozilla, I included the following.

However, this had no visible effect, only a ghost of the title bar is shown when dragging.


Since the "obvious" (and suggested) solution failed - I continued to search.

One "correct" solution is to use setDragImage.

Experimentation showed that provided x/y location had to be the location of the mouse pointer with respect to the of the window you want to drag.

Window with a title bar
This includes the entire window, but still drags as a ghost
To be clear - this works, but is not the look I want.


The other suggested solution is to use addElement.

So I tried this

And got in Chrome 49 on Windows XP - just another waste of time!
Window with a title bar
Fails in Chrome 49 on Windows XP


I tested this in 6 browsers - This is a complete failure!!


With the exception of mozilla's Drag operations, none of these references discussed the various browser issues or differences.

I guess the reason is obvious - The drag interface is so poorly implemented across browsers that there is no reason to waste time documenting the differences!

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Dragging_a_Window_html.html