Jump to content


Replicate jquery's helper feature?

Go to solution Solved by Rodrigo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a good way to replicate jquery's helper feature? (http://api.jqueryui.com/draggable/#option-helper) quick summary: this is a feature where the element being shown while dragging is different that what is originally clicked on.


The general feature is that I want to drag an element from one div to div, but until it is dropped, leave it shown in the original div and spot where it started, and once dropped, perform logic to determine whether it is removed the original div or left there.  (plus, while dragging add a class that will style the element in a different way.)


I'm thinking of trying two ways, but wanted to know if there were other good ways.  1: when dragging starts, clone the object and put it in the dom in the original spot.  Not ideal, don't want to manipulate the DOM like that, and will also need to handle all the cases where I need to clean up.  2. - when dragging starts, clone the element and then stop dragging on the initial element and start dragging on the new clone.  Not sure if this will work, I haven't used the startDrag and endDrag functions yet.


Just wanted to know if I'm missing something before I get started.

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.


This can be done with GSAP, no doubt about it but, as you mention, unlike jQuery UI, GSAP is highly optimized for animations, therefore any DOM manipulation is on the user.


A good way to try this would be to create an element that is in the same position of the element you wan to drag, but with visibility: hidden. Then when you click or drag make it visible and use the same event callback to style the static element. This would look much better if you tween the styles instead of simply adding a class. Finally when the user ends the dragging tween the original element to it's final destination, hide the dragged element and reverse the original element's style animation.


I set up a simple codepen, is not much but hopefully it'll help you getting started. Feel free to fork and adapt it to your needs:


See the Pen LEyLxp by rhernando (@rhernando) on CodePen



  • Like 4
Link to comment
Share on other sites

Thanks, I like that idea, your codepen was great and will help!

Link to comment
Share on other sites

Excellent demo, Rodrigo!


BTW, it reminded me of another one you made awhile ago which uses a similar technique: http://codepen.io/rhernando/pen/Jlfsq(drag the box to make duplicates).


Figured its worth people knowing about;)

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.