Jump to content
GreenSock

shaunhurley

Modify class of element while being dragged

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 Folks,

 

I think I'm missing something super simple, but I can't find it.  In the vanilla demo hit test example an element from a "droppables" collection is used as a jQuery selector, and a "highlight" class is added tot hat element while the hit state is true and removed when it is false.  The effect is that the element *underneath* the dragged element is highlighted.

 

I want to invert that effect, and have the item that is being *dragged* highlighted if it is dragged over a droppable element.  I expected to be able to do this fairly easily by changing the 

 

$(droppables[i]).addClass("highlight");

 

for 

 

$(this.target).addClass("highlight");

 

however this doesn't work.

 

I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen.

 

Many thanks

 

Shaun

See the Pen OzEYEa by shaunhurley (@shaunhurley) on CodePen

Edited by shaunhurley
Additional information,
Link to comment
Share on other sites

4 hours ago, shaunhurley said:

I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen.

 

You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test.

 

To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

 

 

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

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, OSUblake said:

 

You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test.

 

 

Thanks @OSUblake, blindingly obvious once it's pointed out, many thanks!

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