Making Layers Respond to Mouse Drag

[Olawande Meyungbo]

Hi, 

I am new to Google Web Designer but have been doing a lot of catching up lately.

The challenge I am facing is making an object or layer movable by the end user with mouse. Let's say I have a CTA saying move the egg into the basket to unveil flavours. Please how do I make the eggs moveable into the basket then the page with the flavours come up. 

Many thanks 

[Piotr Kowalski]

Hello

in the script view mode click File->Add Library->GreenSock->Draggable

then follow this documentation:  

https://greensock.com/draggable

https://greensock.com/docs/Utilities/Draggable

legendary :) 

[Olawande Meyungbo]

Thanks a lot, Piotr

This helps a lot 

Please I am having issues placing the code. I am trying to start with the 

Draggable.create("#yourID"); 

So I am trying to insert draggable.create("#code") in the script here. 

I have already done the Include JS library -> Greensock -> Draggable then achieved this 

So what I am trying to do now is to insert the draggable.create("#code") at the bottom as attached

But still no outcome. Please how do I make this work?

P.S: I am so so grateful

[Piotr Kowalski]

Hello 

1. You need TweenMax and Draggable - I forgot

<script type="text/javascript" id="js-TweenMax" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script>

<script type="text/javascript" id="js-Draggable" src="https://s0.2mdn.net/ads/studio/cached_libs/draggable_1.19.0_32333fccffeadc28c50c8864d479dceb_min.js"></script>

2. If you don't use jquery you need to find elements with pure javascript 

window.onload = function () { 

var myDraggable =  Draggable.create(document.getElementById("dragg"), {

type: "x,y",

onDragEnd: function (e) {

var slot = "#slot";

if (this.hitTest(slot, 20)) {

alert("done");

}

},

onRelease: function (e) {

},

onPress: function (e) {

}

}); 

}

3. grab test project from attachment  http://wooosh.pl/ftp/testDragg.zip

4. read documentation ;)  https://greensock.com/docs/Utilities/Draggable/static.create

[Olawande Meyungbo]

Many thanks Piotr,

This works perfectly. I am very grateful, I was able to drag the layer. 

Sorry I might be bothering you right now, I would to know if using Google Web Designer, I can initialize an action or timeline after drag. 

Using the test you sent to me, I am looking at a scenario whereby the green tab on the right begins to move after the red tab has been dragged into it.

Please is this possible with Google Web Designer, if yes, please can you share a clue on how to go about it

This is much appreciated