Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Afrowave

Drag and Drop with Snap - broken

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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?

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

√ó