Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable cloneZone and weird animation

Recommended Posts

Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable  plugin and this is my achievement by now

See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen


I am trying to replicate this Drag & Drop Library:  http://sunpietro.github.io/dragster/


-1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element

-2) Smooth drop animation

-3) CloneBase ->  Only draggable option / Copy elements from here, no possible to drop options

-4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted

-5) Trash zone -> Only drop zone to remove elements


So i started by the point 1 & 2, and it gets weird how the element is dropped.

Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my  slots, i guess i have to move into the slot after the transition.


as i said, the animation is weird, not smooth like this one, and the code is basically the same.

See the Pen RxqzjZ by HectorLeon (@HectorLeon) on CodePen


So i have a  clone-base at the top, and the elements would be draggables & copies from there, to put into my grid.



Can you help me first with the Weird animation & the cloneZone.


Or if there is a sample case ( i didn't find it i would love to use it as a guide )

thanks in advance.

See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen

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.