Jump to content
Search Community

Draggables detect wrong element with hitTest

MattE 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

Hi guys

 

I'm back at it again with another issue (yay, issues!)

 

Currently I'm still working on the project of which I've already posted something about

--> http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div

After working a bit on it, I've again hit a wall.

 

Let me just explain the codepen a bit because it can be pretty complicated at first.

This is working right now, but only for 1 try. I've you fail somewhere, reloading the page is the best option.

I'm trying to make it happen right 1 time so I can make it 'simpler' to change things and make it repeatable (so you don't have to reload) 

--> 

 

1) Letters from the topbar have to be dragged on top of the tomate (soupZone)

Drag all the letters (b-o-l) to the soup to get the correct results

 

2) Close the topbar by pressing the (ABC) button

 

3) Watch the letters animate in the soup

 

4) A copy of the letters are being animated in the grey zone (wordZone, between the soupZone and the topbar)

PROBLEM #1: This animation starts from a weird position because I can't seem to get the coordinates right

 

5) After the animates, the letters in the wordZone (should animate back to the correct letter in the soupZone) and be deleted. Tiles with a [.] takes their place.

 

6) Now it should be possible to drag the letters (a copy of it) from the soupZone to the wordZone on top of the correct [.] .

PROBLEM #2: When I try to drag the letters, the just move to the topbar because for some reason, they think that they've hit the topbar, which isn't the case.

 

I know my code is kind of a mess, but I was going to clean it up a bit when I've made it work completely.

 

The reason (I think) for both problems is that something is off with the positioning.

It seems to look for the relative position instead of the absolute position.

 

It would be awesome if somebody could take a look and help me out.

If something is unclear or vague, I'll be happy to assist :-)

And if you want to completly refactor the code to make it more readable and other stuff, please don't hesitate!

 

 

:-)

 

 

 

 

 

 

See the Pen qdWzog by Mattttt (@Mattttt) on CodePen

Link to comment
Share on other sites

Lol. Let me look at it for a minute. But I think I've run across this problem before, which is related to using jQuery objects for hit tests.

 

EDIT: I deleted the post since you change it.

 

Well, I was trying to refer to you so I could trigger some kind of notification, but that didn't seem to work.

But you've still magically appeared here, so it kind of worked! 

Link to comment
Share on other sites

#6 actually uses the same code as at the start (to drag stuff from the topbar to the soupZone and back)

 letter.draggable = new Draggable(clone, {
    onPress   : setActive,
    onDrag    : collapseSpace,
    onRelease : dropTile
  });

This defines the method that are called when a dragevent happens.

Those methods aren't yet "able" to drop something on top of the [.] because I had the issue that they didn't even drag 

Link to comment
Share on other sites

Yeah, I see a lot of the problems now. The hit test is working fine, but in your code you're getting the clones and the letters mixed up in what action you want to happen.

 

The

See the Pen dPEbey by osublake (@osublake) on CodePen

I made would probably solve most of these problems, but that would require you to redo a bunch of stuff. Probably not something you want to do, but since I helped paint you into this corner, I will walk you through it. I'm going to be super busy this week, but I'll try to help you out as much as possible over the next couple of days. 

  • Like 2
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...