Greg Stager Posted April 10, 2020 Share Posted April 10, 2020 Here is a question that I was pondering. I was studying the applyBounds() for draggable objects. This allows me to restrict objects to a particular area. Is there a way to restrict objects from an area? In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box? I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere? (Just imagine three baseballs in a shoebox) They cannot occupy the same space at the same time. See the Pen XWmJjeR by Arelwynn (@Arelwynn) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted April 10, 2020 Share Posted April 10, 2020 A couple similar threads. 4 Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 Thank you. I had done several searches using terms like prevent and overlap and found the hitTest pen but not those two threads. I will investigate those as they look like what I am trying to figure out. Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 Well... I feel better that I wasn't missing something simple. DOH! 1 Link to comment Share on other sites More sharing options...
PointC Posted April 10, 2020 Share Posted April 10, 2020 Yeah, I tinkered with a bit of that after @OSUblake posted his answers and demos, but my head started to overheat so I went back to my SVG comfort zone. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2020 Share Posted April 10, 2020 Pretty sure I used the word "complicated" in both of those threads. 😉 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 10, 2020 Share Posted April 10, 2020 Those are great @OSUblake ! There is so much amazing stuff on this forum when you dig around for it (its worth digging). Sometimes I head back into pages 300 to 400+ and just read old posts, you can discover all kinds of awesome stuff laying around. 👍 Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 Yeah, no kidding. I will settle for some sort of drag rejection. Like if (hitTest == true) { go back to start position; } else { stay where I drop you; } I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true. Perhaps I will play with that concept. Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2020 Share Posted April 10, 2020 14 minutes ago, Greg Stager said: I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true. Perhaps I will play with that concept. That might be a good enough solution. The only problem with that is that you might not be able to get objects butting up against each other. For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them. If you can live with that, then go for it. And if you are using circles, then using circle collision detection will work better than Draggable's hit test. See the Pen YXpdYN by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2020 Share Posted April 10, 2020 8 minutes ago, Shrug ¯\_(ツ)_/¯ said: There is so much amazing stuff on this forum when you dig around for it (its worth digging). Sometimes I head back into pages 300 to 400+ and just read old posts, you can discover all kinds of awesome stuff laying around. 👍 It seems like the number of good/interesting questions has dried up lately, so most of my good posts are several years old. Nowadays most questions are about scrolling, which don't interest me. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 10, 2020 Share Posted April 10, 2020 Yes I've sadly noticed that over time also. It used to be almost like GSAP code battles in every thread around here. 😄 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2020 Share Posted April 10, 2020 Just now, Shrug ¯\_(ツ)_/¯ said: GSAP code battles in every thread around here. 😄 Ha, yeah! A good thread would have like 3 or 4 people coming up with unique and better solutions. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 10, 2020 Share Posted April 10, 2020 A couple of other brain teasers by @OSUblake below. 😉 1 Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 9 minutes ago, OSUblake said: For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them. If I am using snap, I expect it will snap into position but if I drag it too far it will then need to tween back to the original position or do I expect too much there? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 10, 2020 Share Posted April 10, 2020 1 minute ago, Greg Stager said: If I am using snap, I expect it will snap into position but if I drag it too far it will then need to tween back to the original position or do I expect too much there? Got a demo for us? Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2020 Share Posted April 10, 2020 snap will just "snap" it into a position. If you want to tween it into a position, then you would probably need to create a tween in the onDrag callback. 1 Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 Just now, ZachSaucier said: Got a demo for us? Not yet. I am challenging myself with something special based on another post I was reading. I am happy with the progress I made so far and was trying to figure out a way to prevent a dragged object from resting on top of another one but also have dynamic boundaries. I do have a finished product that does not use gsap but uses a whole lot of variables and conditional statements and that requires clicking. My goal was to recreate that project with gsap tools, minimize the logic, and implement dragging. It is my project for the weekend. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 10, 2020 Share Posted April 10, 2020 Maybe these will help you if I understand correctly what you are describing. https://greensock.com/forums/topic/17177-draggable-with-snap/ https://greensock.com/forums/topic/11869-draggable-revert-to-original-position/?do=findComment&comment=48550 1 Link to comment Share on other sites More sharing options...
Greg Stager Posted April 10, 2020 Author Share Posted April 10, 2020 6 minutes ago, Shrug ¯\_(ツ)_/¯ said: Maybe these will help you if I understand correctly what you are describing. https://greensock.com/forums/topic/17177-draggable-with-snap/ https://greensock.com/forums/topic/11869-draggable-revert-to-original-position/?do=findComment&comment=48550 Those do appear to have some promising application - I will certainly investigate them further this evening. Link to comment Share on other sites More sharing options...
PointC Posted April 10, 2020 Share Posted April 10, 2020 1 hour ago, OSUblake said: Nowadays most questions are about scrolling, which don't interest me. Those will all go away when the new plugin is released. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now