Jump to content
Search Community

Drag and Drop with Snap - broken

Afrowave test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey Greensockers ?,
 

I am trying to set up a Drag and Drop with Snap, forked from

See the Pen IaAfl by antpearson (@antpearson) on CodePen

. But some how mine is broken and not snapping as it should, even wit hall the tell-tale signs that it should. I even have commented out implementation that I tried and broke as well.

I looked through a number of likely past posts but none of them were doing this. May someone with an idea of what I could be doing wrong point me in the right direction? I would be very grateful.
 

See the Pen KOmKPr by Afrowave (@Afrowave) on CodePen

  • Like 1
Link to comment
Share on other sites

There are 3 mistakes.

 

  1. in dragEnd, console.log(box) is giving error. There is no such thing as box
  2. Remove x:0, y:0 from tween.to
  3. I have no idea why, the right box doesnt show border for the second time.

But, once you solve 1 & 2, it started working a little.

 

Here is the forked codepen

See the Pen PoYZEKo by kishin-karra (@kishin-karra) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

1 hour ago, Kishin Karra said:

I have no idea why, the right box doesnt show border for the second time.

It's caused by one of the classes given on dragEnd not being removed in the case where the element is dragged from one box directly to the other.

 

One way you could fix it is by removing that class on drag start:

 

onDragStart:function(e) {
  e.target.targetAttachedTo.removeClass("occupied");
},

See the Pen YzKweeW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

1 hour ago, Kishin Karra said:
  • in dragEnd, console.log(box) is giving error. There is no such thing as box
  • Remove x:0, y:0 from tween.to
  • I have no idea why, the right box doesnt show border for the second time.

Ho Hooo. Thanks guys. Interesting. We are half way there. I have shrunk the target size to allow a clear view of the snapping action.

I thought, looking at the original, that the "x:0, y:0" was part of the snapping in the TweenLite function, snapping to, say, the top most, left corner. Without that, how would the snapping be done?

 

Link to comment
Share on other sites

33 minutes ago, Afrowave said:

I thought, looking at the original, that the "x:0, y:0" was part of the snapping in the TweenLite function, snapping to, say, the top most, left corner. Without that, how would the snapping be done?

Technically the x:0, y:0 is just assuring that there is no other offset - the left:p.left, top:p.top is the part that assigns where in the target the element should be positioned.

 

The reason why it's not working in the demo above (in fact, the tween inside of the dragEnd is effectively doing nothing) is because you failed to assign position: absolute to the draggable elements. I'd recommend putting that style declaration inside of the .each function so that you can position them however you'd like before making them have position: absolute.

 

See the Pen abodYaW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Haha 1
Link to comment
Share on other sites

10 minutes ago, ZachSaucier said:

I'd recommend putting that style declaration inside of the .each function so that you can position them however you'd like before making them have position: absolute.

Very nice Zach!

That means that I really can't use the "display: flex;" that I have used. I un-commented the other button and it ended up on top of the visible one. But that is a CSS problem, not GSAP!

Thank you Zack, for your time. This one stumped me. But now I am on my merry way. ?

  • Like 1
Link to comment
Share on other sites

9 minutes ago, Afrowave said:

That means that I really can't use the "display: flex;" that I have used.

Oops, I forgot to set the top and left of the elements. I updated the above demo to set them. You don't have to switch your positioning away from flex.

 

One tricky thing: you need to set the position to absolute in a second .each loop because otherwise the elements after the first will be mispositioned.

 

Keep in mind that if a user resizes the page the original position of these elements will likely not be what you want. You need to handle resize logic if you want it to be very responsive.

 

Also keep in mind that anything that comes after these buttons will likely shift up on page load because of the position: absolute. You might want to compensate for that somehow (maybe a set height or set margin-bottom).

 

Happy tweening :) 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

One tricky thing: you need to set the position to absolute in a second .each loop because otherwise the elements after the first will be mispositioned.

Wow!

We have to love GSAP and the team at GreenSock. Thanks Zack.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...