Jump to content


Automatically passing focus to newly created element

Recommended Posts

Hey folks,


I inherited some code, which introduced me to GSAP, and I've rapidly become a fan.  While trying to implement some mods, I've run into a circumstance I can't find in the docs, so hoping someone here may have some thoughts.


Starting point is a "template" <div/> which is static (no GSAP magic).  On the mousedown() event for the template I clone a new instance of the div, and make it Draggable.  (Note:  because I have cloned it without changing offset it is in the same location but "in front" of the original div - color changes to indicate clone)


This all works well, however I have to release the original mousedown (take my finger off the button), and then click-and-hold the mouse again in order to initiate a throw of the new object.


In a perfect world, I would be able to "transfer" the focus/mousedown state to the newly created draggable div and immediately initiate the throw

without releasing the mouse button and clicking again.


I've tried passing the .focus() and triggering another .mousedown() but that doesn't appear to work.  Not sure if there is a different event I should be firing or somethign else entirely...


Any thoughts greatfully appreciated!






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

Link to comment
Share on other sites

  • shaunhurley changed the title to Automatically passing focus to newly created element

Hi Mikel,


Thanks, that codepen is illustrating similar functionality to what I have already achieved i.e. creates a clone which is then draggable. 


Unfortunately it doesn't help with the automatically moving focus to the cloned object though.


I've added a codepen of my current state to illustrate my question a little better.





Link to comment
Share on other sites

You can do that by dragging actual element, and leaving a clone in the place of original element.


Create a function that adds draggable functionality to element and call it every time you create new clone. While dragging, just drag actual element and leave the clone behind. I had created a partially functional demo but wasn't sure about your actual requirement so didn't finish it. I also was a little confused because you mentioned offset. In case you are dragging the element into the another container, you can just append it to new container and it will stay attached to current drag.


  • Like 1
Link to comment
Share on other sites



ok - I did not understand your briefing correctly, completely.
Your example is cool ...


Great job @Sahil.


Maybe, it does not meet your goals @shaunhurley, but - just for fun - enter would be something feasible also:


See the Pen zPxOzg by mikeK (@mikeK) on CodePen


Kind regards




  • Like 1
Link to comment
Share on other sites

@mikel thanks, looks like op answered his own question but it needs some work for touch devices as it isn't working on mobile. I guess it can be easily fixed by correct events.


I did consider raising events to trigger drag and realised it will need event data and seemed too complex.


Just to make us feel better, docs say you will rarely need startDrag. :D

  • Like 3
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.