This issue was originally filed by steven....@gmail.com

What steps will reproduce the problem?

1. Start the 'Basic Drag and Drop' Dart demo.
2. Drag one column over the header region of another.

What is the expected output? What do you see instead?

Instead of exchanging the inner.html of the dragged and target column, the dragged column is filled with contents of the target header, and target header is filled with contents of column. You can see by two lines appearing at the bottom of the targeted column and no line in the dragged column. Also, the 'over' styling does not work if you drag inside the header. It only works in the main part of the column.

What version of the product are you using? On what operating system?
Dart 1.2.0, Google Chrome 33.0.1750.152, Fedora 17

Please provide any additional information below.

The problem is that the _onDragEnter, _onDragover, and _onDragLeave listeners fire not only when the given element is dragged over, but will also fire in response to dragging inside a child element and the event.target will be the child element. Worse yet, dragging the mouse from the header to the main region of the column will cause _onDragEnter to fire first with the column as the event.target, followed by _onDragLeave firing with the header as the event.target. This makes turning on or off 'over' styling based simply on that last DragEnter or Dragleave event insufficient.

I have provided a possible solution that does not have these problems (with Chrome at least). First I provided a function that will ascend the DOM tree from a child element until it find a parent element with the column class. This is used in the _onDragEnter, _onDragover, _onDragLeave and _onDrop to retrieve the parent column element from a child element whether or not the event.target is the column or a child element of the column.

This still leaves the problem of the 'over' styling not being set when dragging in the header. To solve this I attached a 'dragCounter' attribute to the columns elements which is incremented on any _onDragEnter event and decremented on any _onDragLeave event. Now dragging back and forth between the header and body does not mess up the highlighting.

I have attached modified versions of the .dart .html and .css files with these changes. The .css file is slightly altered to make the headers more colorful and obvious.

Attachments:
dnd.dart (3.16 KB)
dnd.html (755 Bytes)
dnd.css (2.26 KB)