Animation trigger by adding class

programming
1

Using Kirupa Create a Draggable element
{Create a Draggable Element in JavaScript | KIRUPA}
I would like to cause #item (red disk) to return to starting point on dragEnd
Doesn’t seem to work so I simplified function to a change of colour on button click
{https://roger-eve.w3spaces.com/Trigger-animation.html}
This doesn’t work either…
I have had similar code working elsewhere
{Create your own website | W3 Spaces}
Please lighten my darkenss
Roger

2

Hi @rogereve - welcome to the forums :slight_smile:

The main change to make is in the dragEnd event handler where you reset the offset variables back to 0 and set the position of the circle back to its original position (which is always a translate x/y value of 0):

function dragEnd(e) {
  // Reset position back to original starting point
  setTranslate(0, 0, dragItem);
  xOffset = yOffset = 0;

  active = false;
}

You can see the full source here: kirupa/examples/drag_and_return.htm at master · kirupa/kirupa · GitHub

Let me know if this unblocks you :hamburger:

Cheers,
Kirupa