Jump to content
GreenSock

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

Draggable onDragEnd function adding an extra if statement

Recommended Posts

Hey there forums! This is kind of more of a general javascript question than a greensock question, though it does involve greensock! I'm trying to build off of this codepen I found - 

See the Pen IaAfl by antpearson (@antpearson) on CodePen

 My goal is essentially to create more boxes and targets and have certain boxes with a class of 'incorrect'. I'd like to check for when a box with the class of 'incorrect' is on a target with a Check Answers button that I've created. 

 

The difficulty I'm having is trying to add a class of "wrong" to the targets when a box with the class of "incorrect" is snapped onto a target. My theory is that then with the Check Answers button I can just look for targets that have the class of "wrong" added to them. 

 

I've started building off of this codepen on my own - 

See the Pen MBRNNL by kbeats (@kbeats) on CodePen

 Where I've changed the first box to the color blue and added the class of "incorrect" to it. In the CSS panel I also added a class of "wrong" and changed the width to 300px for now in the class, so I will know if my code is working.  I wrote the function: 

 

if (e.target.hasClass("incorrect")) {
            $(targets[i]).addClass("wrong");
          }

 

I'm still learning, so I hope this function is written correctly? Essentially wanting to add the class "wrong" to targets which have a box with the class of "incorrect" snapped to them. 

 

But wherever I put this function in the onDragEnd function, it seems to break things. . . right now it's at the bottom of my code and commented out. I've never seen a function as long as this onDragEnd one with so many nested if statements, so I'm pretty confused as to how everything is firing off and where I could put my function without mucking everything up? 

 

 

Any help is much appreciated! 

See the Pen MBRNNL by kbeats (@kbeats) on CodePen

Link to comment
Share on other sites

Sorry, but that onDragEnd just has way too many conditions for me to try to untangle. I suspect your kind of close, but its just really hard to look at code like this for the first time:

 

  if (
            e.target.targetAttachedTo != $(targets[i]) &&
            e.target.targetAttachedTo != undefined
          ) {
            e.target.targetAttachedTo.removeClass("occupied");
            e.target.targetAttachedTo = undefined;
            //alert("Occupied class removed.");
          }

 

and try to debug what it is doing, what it should be doing, and decide whether or not its even related to the issue.

 

Hopefully you understand that many of us would love to help with this kind of stuff but it can be really time-consuming and we need to stay focused on the GSAP API.

  • Like 3
Link to comment
Share on other sites

No worries, I understand! Thanks for the comment. I wasn't sure if the answer was super obvious and simple and it was just my lack of knowledge with code. 

Link to comment
Share on other sites

Hi @kbeats 

 

On 8/22/2018 at 12:45 PM, kbeats said:

My goal is essentially to create more boxes and targets and have certain boxes with a class of 'incorrect'. I'd like to check for when a box with the class of 'incorrect' is on a target with a Check Answers button that I've created. 

 

The difficulty I'm having is trying to add a class of "wrong" to the targets when a box with the class of "incorrect" is snapped onto a target. My theory is that then with the Check Answers button I can just look for targets that have the class of "wrong" added to them. 

 

 

I'm so confused. Why would something be incorrect before you check it?

 

And that's way too many class checks. I think the original author of that demo was trying to avoid "hasClass" logic by linking the box to the target with the targetAttachedTo property, but the connection is not obvious because of the "target" naming being used with an event target in the same line of code. 

 

This will actually check if something is incorrect.

 

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

 

 

 

  • Like 5
Link to comment
Share on other sites

Nice demo, Blake. Super clean and clear!

  • Like 1
Link to comment
Share on other sites

This is awesome Blake, that's exactly what I was looking to do. THANK YOU SO MUCH! 

  • Like 3
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.
×