[MAGNOLIA-4256] page editor: implement drag and drop using native gwt support Created: 14/Feb/12  Updated: 22/Mar/12  Resolved: 16/Feb/12

Status: Closed
Project: Magnolia
Component/s: None
Affects Version/s: None
Fix Version/s: 4.5

Type: Task Priority: Neutral
Reporter: Espen Jervidalo Assignee: Espen Jervidalo
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
relation
is related to MAGNOLIA-4161 DnD: order node according to move dir... Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:

 Comments   
Comment by Federico Grilli [ 14/Feb/12 ]

Works with latest Safari and FF, not latest chrome unfortunately (dragging starts but then something must go awry with dropping).

Comment by Federico Grilli [ 14/Feb/12 ]

Another thing I noticed: move is triggered also when source and target are the same or when either of them is undefined or empty (the latter can happen if you i.e. try to drag an element below the draggable edit bar onto a target element). The client code (and perhaps the server-side code in InterceptFilter too?) should check those conditions and, in case, abort the move.

Comment by Espen Jervidalo [ 14/Feb/12 ]

Reopened, because there still are problems between different browsers. Works in FF 9 and safari. Doesn't work on chrome 17 and most probably not on that other thing..

What I have come up with so far is that on firefox, I am able to set and get the dropEffect and effectAllowed from the DataTransfer object, on chrome neither does work:

public void onDragStart(DragStartEvent event) {
..
event.getDataTransfer().setData("dropEffect", "copy");
..
}

Here are some related Links:
http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-effectallowed
http://code.google.com/p/chromium/issues/detail?id=39399

Comment by Federico Grilli [ 15/Feb/12 ]

I think we should also re-implement the node sorting logic (in InterceptFilter) like this:

1) drag/move up or left -> source/dragged node is ordered before target/droppable
2) drag/move down or right -> source/dragged node is ordered after target/droppable

It should be fairly easy to implement it as we have the mouse coordinates for the dragstart and drop events so that we can calculate the direction of the move and react accordingly. I don't know if by now you have realized that I would really love to implement it

Comment by Espen Jervidalo [ 16/Feb/12 ]

This is working now for modern browsers.
What was missing and caused strange behavior on some browsers:

  • in the setData(String format, String value) function on the event.DataTransfer object one must explicitly set the mime-type as the format String. If not some browser will not work.
  • must cancel the default browser eventhandling in the dragOver- and drop-event: event.preventDefault()

Reference:
https://developer.mozilla.org/En/DragDrop/Drag_Operations

Generated at Mon Feb 12 03:54:05 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.