Tutorial: Drag and drop elements with Google Web Designer

A quick tutorial about how to create Drag’n’Drop on the stage with just 8 lines of code. Google Web Designer doesn’t provide native Drag’n’Drop for elements on the stage, so we have to create it on our own.

Find more tutorials on http://www.html5advertising.de
Find full Drag’n’Drop Tutorial here: http://html5advertising.de/2019/01/tu…

For touch events, just attach the touchstart event to the same dragStart function and a touchMove event for the page. The following script will catch both, touch and mouse events:

Javascript:

gwd.dragStart = function(event) {
gwd.dragger = this;
event = (event.touches ? event.touches[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”]);
}

gwd.dragMove = function(event) {
if (gwd.dragger) {
event = (event.touches ? event.touches[0] : event);
gwd.actions.events.setInlineStyle(gwd.dragger.id, “left:” + (event.pageX – gwd.dX) + “px; top:” + (event.pageY – gwd.dY) + “px”);
}
}

gwd.dragStop = function(event) {
gwd.dragger = null;
}

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *