Jump to content
GreenSock

darkgr33n

Draggable - do something when position of child element hits horizontal center

Go to solution Solved by GreenSock,

Recommended Posts

Hey all,

 

I'm trying to get something working on mobile that I have working on desktop. On desktop i'm using mouseenter and mouseleave to add a class and expand the width of a child 'slate' element.

 

For mobile, the reduced screen size means I need slightly different functionality so I want to introduce the ability to drag the wrapper element and fire the same animation on the child element if the child is within 30px of the horizontal center of the window.

 

Surprisingly I seem to have it working, however I'm not really sure if my method is over-the-top and I wonder if i've missed a much cleaner way of achieving what i'm after.

I have 9 'slate' elements.

On mobile, you'll probably only see 3 slates. 

The idea is you drag the elements across the screen horizontally, and as you drag if a child element hits the center of the screen, we add a class to highlight the element. If you end the drag with the element highlighted, it will then run an animation to expand the width of that element.

 

In my draggable instance, i'm using three functions and this is where i'm unsure.

each function has to loop through all the child elements to see if any of them is in the center - or highlighted - , so 

 

onDrag:

function has to loop through everything as it's being dragged to see if the position of any of the elements is in the center of the window.

if it is, it add a class to highlight the element.

onDragEnd:

function has to loop through all the child elements to see if we have a highlighted class added.

If it does, it runs an animation .

onDragStart:

function has to loop through all the child elements to see if we have a highlighted class added.

If it does, it reverses the animation.

 

So the question is, does it seem reasonable to be looping over everything all the time or is there a simple method that I've totally overlooked that would achieve similar functionality. 

 

Cheers!

 

 

See the Pen abBqRvR by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

3 hours ago, darkgr33n said:

oes it seem reasonable to be looping over everything all the time or is there a simple method that I've totally overlooked that would achieve similar functionality. 

I'm guessing you didn't see the Draggable.hitTest() method? :) 

  • Like 1
Link to comment
Share on other sites

Thanks Zach.
To be honest, I did see it but wasn't sure if it was entirely relevant in my case. Because I was targetting the child elements of the element I'm dragging I didn't think it would work and so I reverted to getting it working any way I could!
So in theory then, I could  use hitTest to effect the same behaviour. Interesting. I'll try and explore it and see if I can get it working in my case later today.

Thanks

Link to comment
Share on other sites

I don't fully understand the end goal, but it sure seems like it'd make detecting which is in the center a lot easier.

Link to comment
Share on other sites

Thanks Zach,

The end goal is for it to work as it does now, just a little more efficiently ;)

 

When dragging it needs to just add a class to each of the child elements as it passes the center point.

If you end the drag while an element is on the center point, it needs to run an animation that widens the element.

 

It will do other things, but I wanted to reduce the code to just the functionality i was struggling with. There will be text popping up and a video playing, but i just needed to nail being able to initiate some kind of action when dragging the child elements over the center of the screen. 

 

I'll give the hitTest a go and report back.

 

Cheers!

Link to comment
Share on other sites

Conceptually I would approach it as:

If an element is hitting the mid point, animate it in. If it stops being hit, animate it out.

Link to comment
Share on other sites

Thanks Zach that's helpful.

For the mid-point, I'm assuming I'd have a div that's not visible, absolutely positioned in the center to act as the testObject.

 

I assume I'm ok having three hitTests on one draggable instance, like I've done in my demo: one for onDrag - which adds a class; one for onDragEnd - which animates the element; and one for onDragStart - which clears everything ready for the next one.) ? 

 

Cheers!

Link to comment
Share on other sites

Just had a quick look at getting this working, but I think what I struggled with when I first saw hitTest was that the target element - the actual element being dragged - is actually a wrapper, and I can't see a way I can use hitTest as the child elements I need to effect are within the draggable target. 

See the Pen rNWdxjW by darkgr33n (@darkgr33n) on CodePen

 

Link to comment
Share on other sites

  • Solution

I don't have time right now to look through all your code, but I wanted to make sure you knew that there's a static Draggable.hitTest() method that you can use if you want to check if two arbitrary elements are hitting - you do NOT need to use the actual element that the Draggable is controlling: 

https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest()

 

Like:

Draggable.hitTest(element1, element2, 20)

Demo:

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

  • Like 2
Link to comment
Share on other sites

Hey Jack,

 

Thanks for highlighting that point, I had totally missed that there was a static method I could utilise as well.

I just gave it a go and it seems to work and has saved about 20 lines of code! I might be able to optimise it a little more, but for now I'm pretty happy.

 

See the Pen MWbVooR by darkgr33n (@darkgr33n) on CodePen

 

Next step is to make draggable only available on mobile but I should be able to use matchMedia for that.

 

Cheers!

 

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.
×