Javascript Dragging a Window using the HTML Drag Type

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

Display the entire window that was being dragged, and
Get rid of the ghosts that are displayed during the drag events

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 (w3.org), 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.

var SavedX, SavedY ; // Set when dragging begins

// These events are shared by every test window on this page

document.addEventListener("dragover", function(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
});

document.addEventListener("dragenter", function(event) {
  event.preventDefault();
});

document.addEventListener("drop", function(event) {
  event.preventDefault(); // seems to have no effect except in Firefox
                          // without this, Firefox tries to open a new page
});

None of the windows have an ondrag event.
In all cases, the dragged window's ondragend event actually moves the window to the new location.

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

HTML content may use the text/html type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the innerHTML property of an element.

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.

  event.dataTransfer.setData("text/html", event.target.parentNode.outerHTML);

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

setDragImage

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

One "correct" solution is to use setDragImage.

dataTransfer.setDragImage(element, x, y)
  Uses the given element to update the drag feedback

This method must run the following steps:

If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.
If the drag data store's mode is not in the read/write mode, abort these steps. Nothing happens.
If the element argument is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size);
otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).
Set the drag data store hot spot coordinate to the given x, y coordinate.

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.

  xOffset = event.clientX - target.parentNode.offsetLeft ;// save the relative offset
  yOffset = event.clientY - target.parentNode.offsetTop  ;

  event.dataTransfer.setDragImage(event.target.parentNode, xOffset, yOffset );

setDragImage

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.

addElement

The other suggested solution is to use addElement.

dataTransfer.addElement(element)
  Adds the given element to the list of elements used to render the drag feedback.

Note: The difference between setDragImage() and addElement() is that the latter automatically generates the image based on the current rendering of the elements added (potentially keeping it updated as the drag continues, e.g. if the elements include an actively playing video), whereas the former uses the exact specified image at the time the method is invoked.

So I tried this

  event.dataTransfer.addElement(event.target.parentNode);

And got

Uncaught TypeError: event.dataTransfer.addElement is not a function

in Chrome 49 on Windows XP - just another waste of time!

addElement

Window with a title bar
Fails in Chrome 49 on Windows XP

Summary

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

OS	Browser	Simple	setData - "text/html"	setDragImage	addElement
Win XP	Chrome 49	Shows a ghost when dragging	Same as Simple	Shows window as ghost	Fails
Win XP	Firefox 24	Fail - clientXY = 0 during ondragend
Win 10	Chrome 55	Shows a ghost when dragging cursor in wrong position	Same as Simple	Shows window as ghost - worthless cursor in wrong position	Fails
	Firefox 47	Fail - clientXY = 0 during ondragend
	Edge 25	Moves - uses a copy, not a ghost	Only shows title	Does not support property	Does not support property
	IE 11	Shows ghost, moves fine	Does not support property	Does not support property	Does not support property

References

HTML Drag and Drop API - mozilla.org

Pretty good help

DataTransfer.setData() - not particularly useful
Recommended Drag Types - The Dragging HTML and XML section explains how to control what is displayed during the drag operation.
Drag operations - this is very long, but it covers some of the Firefox "issues" I found via trial-and-error

HTML5 Drag and Drop (w3schools)

Fairly weak help, contains a number of examples, but no real description of the api

HTML5 Drag and Drop (w3.org)

Very detailed description of the intent of each of the associated events. Apparently, this interface allows dragging objects from one browser to another.

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