GSAP draggable

[hareeshch]

Hi,

Can we implement below pen using GSAP draggable.? i don't want to use jquery UI.

Thanks for reading

See the Pen wBrpXX by iamhareesh (@iamhareesh) on CodePen

[Carl]

The dragging is super easy. Draggable also has built-in hitTest() capability. For the sorting, no, Draggable does not currently handle that on its own.

You would have to create your own sorting logic and functionality.

 

Our forum moderators Diaco and Blake have worked on some conceptual demos like: http://codepen.io/MAW/details/eIDna/

 

Perhaps that will point you in the right direction.

[OSUblake]

I've been meaning to post this demo because I know this question comes up a lot.

 

Play around with the different setup options to change the layout. For example...

// Changing this to true will make the tiles the same width
var fixedSize = true;

// Changing this to true will create a column layout instead of a grid
var oneColumn = true;

CodePen URL: 

See the Pen RNLdpz by osublake (@osublake) on CodePen

[Jonathan]

Very nice take on a GSAP Isotope grid wall OSUBlake

[OSUblake]

Thanks. I originally started out trying to copy some of the algorithms DeSandro uses, but soon realized that most layouts can be achieved using a simple tracking loop.

 

Just for the sake of comparison, here's what my demo would like if I used Isotope/Packery+Draggabilly over GSAP. The response time is a lot slower, my range of customization is very limited, and the layout seems to break when I drag a tile off screen and release it.

 

+1 for GSAP

 

See the Pen LEzKPr by osublake (@osublake) on CodePen

[Jonathan]

Very cool.. I just tested on my Droid Turbo android 4.4.4 and did not see any response time issues.. even in codepen's mobile edit mode.. great job!

[Carl]

Blake, 

 

That Sortable Grid is beautiful! Excellent work. 

I saw it first on my beat up iPhone4S with iOS6 and it responded flawlessly. Super smooth.

 

I love the subtle touches of the element shrinking and becoming semi-transparent when dragged. It just feels really nice.

 

Carl

[GreenSock]

Very nice work indeed, OSUblake! Impressive. 

[OSUblake]

@mikatalk has created a jQuery plugin of my CodePen. Awesome!

 

Demo: http://mikatalk.github.io/jquery-plugin-list/

Repo: https://github.com/mikatalk/jquery-plugin-list

[GreenSock]

Very cool! I tried it on my mobile device and it was super-slick.