[MAGNOLIA-4161] DnD: order node according to move direction Created: 16/Feb/12 Updated: 22/Mar/12 Resolved: 19/Feb/12 |
|
| Status: | Closed |
| Project: | Magnolia |
| Component/s: | core, page editor |
| Affects Version/s: | None |
| Fix Version/s: | 4.5 |
| Type: | New Feature | Priority: | Major |
| Reporter: | Federico Grilli | Assignee: | Federico Grilli |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||
| Template: |
|
||||||||
| Acceptance criteria: |
Empty
|
||||||||
| Description |
|
We are now using DnD for moving page elements within an area and the feeling one has is that it kind of implies 'replace the target element with the source element'. With our current impl this only works when moving/dragging elements up or left because, in the end, we always sort the source element before the parent. What we should do is detecting the move/drag direction and react accordingly, namely
This is quite easy to do it in GWT as we have the mouse coordinates for the DragStart and DragEnd events. Attached is quick and dirty code snippet to demonstrate this. |
| Comments |
| Comment by Federico Grilli [ 16/Feb/12 ] |
private void createDragAndDropHandlers() { this.addDomHandler(new DragStartHandler() { @Override public void onDragStart(DragStartEvent event) { ComponentBar.this.getElement().getStyle().setCursor(Cursor.MOVE); toggleButtons(false); int x = getAbsoluteLeft(); int y = getAbsoluteTop(); event.setData("text", "id="+id+",x="+x+",y="+y); event.getDataTransfer().setDragImage(getElement(), 10, 10); } }, DragStartEvent.getType()); this.addDomHandler(new DropHandler() { @Override public void onDrop(DropEvent event) { event.preventDefault(); String data = event.getData("text"); String[] tokens = data.split(","); String idSource = tokens[0].split("=")[1]; String order = "before"; int x = getAbsoluteLeft(); int y = getAbsoluteTop(); int xSource = Integer.valueOf(tokens[1].split("=")[1]); int ySource = Integer.valueOf(tokens[2].split("=")[1]); boolean isDragUp = ySource > y; boolean isDragDown = !isDragUp; boolean isDragLeft = xSource > x; boolean isDragRight = !isDragLeft; if(isDragUp || isDragLeft) { order = "before"; } else if(isDragDown || isDragRight) { order = "after"; } String parentPath = path.substring(0, path.lastIndexOf("/")); moveComponent(id, idSource, parentPath, order); } }, DropEvent.getType()); this.getElement().setDraggable(Element.DRAGGABLE_TRUE); } the moveComponent() method will add the order parameter to the request so that eventually in the InterceptFilter we will do if("before".equals(order)) { NodeUtil.orderBefore(parent, destName); } else { NodeUtil.orderAfter(parent, destName); } |