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

1 Like
3

Thanks this really helped
I discovered my problem is in understanding position, translate and specifying locations…and your nudge unblocked me…
Thanks again R

1 Like
4

Glad to hear! In creating that example, I did find some interesting challenges - namely around animating the transition as the item snaps back. You’ve inspired me to write (or record a video) about this in the near future :slight_smile:

6

Look forward to it…
Adding class to item that has an animation
then removing class (using animationend event)
Seems useful to me.

8

@rogereve - I was about to reply to your post around translate and CSS animations, but it seems like you just deleted it. Hope you were able to get your question resolved :slight_smile:

9

Returning a dragged item to its starting point on dragEnd()
I used @keyframes to animate the return of dragItem and set coordinates for ‘to’ using CSS var()…

@keyframes mymove {
    from  {top: 0px; left:0px; }
    to    {top: var(--top) ; left: var(--left);}
}

This works by setting the values

  function myBackhome(){
     <!--  r is variable for CSS .root  -->
      r.style.setProperty('--left', 8-currentX+'px');
      r.style.setProperty('--top', 8-currentY +'px'); 
      dragItem.classList.add('myMover');
    }

That is to say the code seems to work with the origin moved to the currentX and currentY (8px to allow for margin) and the endpoint as negative values of current X and currentY
The question is one of understanding exactly what is going on so I know how to apply this in new situations. My ‘working’ example (Create your own website | W3 Spaces)
This is a replacement for my recent deleted post as I wan’t satisfied I had made myself sufficiently clear or done enough digging myself to realise I wasn’t going to ‘see why’ without advice .

10

Translate is always grounded to where you are starting the repositioning from (aka the origin point). You are not dealing with not an absolute position. You are dealing with relative positions.

Once you have moved from your origin point, to return back to where you came from, you have to negate the values. If you moved 10 pixels to the right. To get back to the origin point, you need to move -10 pixels to the right.

Does this help?

11

Thanks
As ever clear, concise and useful.