Modify class of element while being dragged

[shaunhurley]

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 January 13, 2018 by shaunhurley
Additional information,

[OSUblake]

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

 

 

[shaunhurley]

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!