[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:
relation
is related to MAGNOLIA-4256 page editor: implement drag and drop ... Closed
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

  • move up or left -> order source before target
  • move down or right -> order source after target

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);
}
Generated at Mon Feb 12 03:53:14 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.