Draggables detect wrong element with hitTest

[MattE 1 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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.

[MattE 1 Likes (Newbie)]

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! 

[OSUblake 9,990 Likes (Superhero)]

There is a private messaging system built into these forums, but it's all good. No harm done.

 

Help me out real quick, where does #6 happen in your code?

[MattE 1 Likes (Newbie)]

#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 

[OSUblake 9,990 Likes (Superhero)]

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. 

[MattE 1 Likes (Newbie)]

Allright, I'll take a look.

I will try to bother you as less as possible so you can focus on your own work