Jump to content
Search Community

sortable elements with draggable

chagui test
Moderator Tag

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

Oh it wasn't IE that was the weak link? Good one brain  :wacko: but something about the way it worked at the time convinced me to use jQueryUI (long before Draggable existed) anyway.


gui - it looks like there was 17 minutes between my posts, so in that time I went and built it in jQuery (sometimes having a library is just better), then spent a few minutes taking jQuery out of it, then came back here to post. I guess I already had the logic in mind from my original suggestion so that helped?

Link to comment
Share on other sites


Actually ur example is a very good illustration of ones of pb i encoutered, see, you cannot have the corect direction of the drag with this,

see logs

See the Pen GrtEv by anon (@anon) on CodePen

; down, up without release and ur direction detection will wrong suprisingly because infact your

Y position is > 0 but..you reffer to your starting position instead of the actual position

Link to comment
Share on other sites

If you need the y direction of each mousemove, not relative to the starting position, you would only need to add one line to Rodrigo's example (or just move it...). Put this at the end of onDrag

startPos = this.y;
I'm still fuzzy on what the "lasthited" stuff is for, or how that is supposed to work. Is there another API you're drawing this idea from? It might be clearer if you could show us an example of the functionality that you think Draggable should be handling for you.
Link to comment
Share on other sites


thx for ur input, ur example ilustrate pretty much my ask concerning this.lasthited element !

Here you have to loop for test if anyone hitest anything but i guess the API actually doing this in backend, so why not getting this value

from source because its ever calculated;

Link to comment
Share on other sites

that's perfect THANKS....

another quick question, is there a destroy for Draggable.create(....

in other words, I don't want to leak memory, and sometimes I would toss away the LI elements that were draggable, so do I need to do something to let GS know that I no longer need dragging on these elements since they have been removed from the DOM and no longer are used?





Link to comment
Share on other sites

  • 7 months later...

hi guys :)


with OSUblake help , I've modified the codepen and now that correctly shift the DOMs too :)
check this out :


See the Pen eIDna by MAW (@MAW) on CodePen

This is an great example, has anyone tried integrating it to serialize output and implement nesting? I have been using the Nestable JS from Bushell (https://github.com/dbushell/Nestable) for a while and have lots of usable code to generate the menus from Mysql, but I need to drag available options from one list to another list without removing it from the source.


I need to be able to drag tweens from one list to another list where items that are nested will all be applied simultaneously and items that are on the root level will be added sequentially. Lets assume I have a tween option that is {x:50}, I might add that, then add {x:50,y:25} and then add {x:50} again, so I don't want to remove the option from the source list.


In my investigations today I have found a few good things, but none get you all the way, just curious if anyone had expanded this.

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.
  • Create New...