Automatically passing focus to newly created element

[shaunhurley]

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!

 

Thanks,

Shaun

 

 

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

[mikel]

Hi @shaunhurley,

 

Have you ever looked at this? https://greensock.com/forums/topic/15536-cloned-draggable-element-have-etra-styles-and-classes

 

See the Pen ENXgdq by one2gov (@one2gov) on CodePen

 

I am not sure, but could be a solution.

 

Happy cloning and dragging ..

Mikel

[shaunhurley]

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.

 

Thanks!

 

Shaun

[Sahil]

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.

 

[shaunhurley]

Turns out his is fairly trivial :$ with the correct use of the .startDrag() call.  Thanks all!

 

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

 

[mikel]

Hi,

 

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

Mikel

 

 

[Sahil]

@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.