Tutorial: Drag'n'Drop with Google Web Designer

Google Web Designer is a great tool, but there are some features, some might miss. One of the most important gestures not implemented natively yet is e. g. Drag’n’Drop.

However, it’s not too complicated to add this function with a few lines of code to your project:

1. Create a div on the screen, that you want to drag and drop on the stage later and name it „draggableItem“
2. Create an event mousedown for this element and add a custom function „dragStart“ and add these 5 lines of code:

   gwd.dragger = this;
   event = (event.changedTouches ? event.changedTouches[0] : event);
   gwd.s = window.getComputedStyle ? getComputedStyle(this, null) : this.currentStyle;
   gwd.dX = event.pageX - parseInt(gwd.s["left"]);
   gwd.dY = event.pageY - parseInt(gwd.s["top"]);

3. Create an event for the page „mousemove“ and add the following 4 lines of code:

   if (gwd.dragger) {
      event = (event.changedTouches ? event.changedTouches[0] : event);
      gwd.actions.events.setInlineStyle(gwd.dragger.id, "left:" + (event.pageX - gwd.dX) + "px; top:" + (event.pageY - gwd.dY) + "px");
   }

4. Create a last event „mouseup“ for the page and add this line of code:

   gwd.dragger = null;

5. For adding touch events, just add a „touchstar“t event for your draggable object and a „touchmove“ event for the page.
6. For each additional draggable element, just assign a „mousedown“ event for the specific element and link it to our existing „dragStart“ event.

That’s it.