Draggable Queen

[SpiritedMan]

Hi everyone! i wanted to create draggable queen with GSAP draggable, like on chess websites... but i couldn't figure out how to make piece snap to board squares.

See the Pen WNPoJRa by alexander1369 (@alexander1369) on CodePen

[Cassie]

Hiya!

 

Here's a solution using inertiaPlugin

See the Pen jOdyVjM by GreenSock (@GreenSock) on CodePen

 

It's a Club GSAP plugin, but honestly well worth it - Draggable & Inertia make magic together.

[SpiritedMan]

Thank you Cassie! but when i set inertia to false , it doesn't snaps to grid squares,  can it snap without inertia, like on https://lichess.org/training ?

[Cassie]

I can't seem to drag anything there - obviously my lack of chess knowledge hampering things.

Does this demo help?

See the Pen JjwZzNG by GreenSock (@GreenSock) on CodePen

[SpiritedMan]

yes but it still has inertia when i drag and release, it animates in between, i want to make it snap on square without animation.. 

[Cassie]

Did you see the livesnap option?

[SpiritedMan]

yes , but with livesnap checked, you can only drag it on grids... here is another demo https://sebastian.itch.io/knight-jump-visualizer or this https://lichess.org/editor/8/8/8/8/4Q3/8/8/8_w_-_-_0_1?color=white

[Rodrigo]

Hi,

 

I don't have time right now to go into this, but you can definitely try the hitTest method in Draggable:

https://gsap.com/docs/v3/Plugins/Draggable/static.hitTest()

 

Based on that you can set the final position of the element using the onDragEnd callback:

Draggable.create(knight, {
  onDragEnd() {
    // Run hit test logic here using this.hitTest()
    // Then use a set() instance
    gsap.set(knight, {
      x: 0, // calculated value
      y: 0, // calculated value
    });
  },
});

Hopefully this helps.

Happy Tweening!

[SpiritedMan]

naah I'm to dumb, i couldn't figure it out... i did it in plane js