Drag and Drop: Move drop object behind another item.

Mar 07, 2017

I'm creating a drag and drop interaction where the user drops an item into a trash can. The item is dropped onto a hotspot and then using motion path drops down behind the trash can image.

Currently I have the drop object and hotspot set up behind (further down the timeline) the trash can.

I've got the motion path working but the drop item keeps moving in front of the trash can instead of behind it. Any suggestions why this might be?

19 Replies
Paul Tottle

I'm having a similar but different problem. I'm wanting the top most drag & drop object set by "reveal drag items one at a time" to be in the foreground of the drop zone items. However it seems like the target zone objects are given foreground status regardless of any other settings. I would have thought that the top most item to drag & drop would be given foreground status. Any suggestions? Not sure if this is just a limitation of the feature or my lack of knowhow.

Math Notermans

Although this is a simple sample where a click brings an element to a higher z-index and thus shows upfront... this concept can be used in Drag and Drop scenarios too.

These lines of Javascript code do the trick...
let card = document.querySelector("[data-acc-text='c_sp10@3x.png']");
gsap.set(card, {css:{zIndex:100}}) 

Where you ofcourse need to take care that the zIndex given to a higher element...indeed is higher then the highest one on your stage. In this case there were 55 layers...so i could suffice with 56.