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



It could very usefull to enlarge the ui form capabilities of draggable, after input range,

i was trying to make a sortable list elements with draggable but it seems difficult infact,

i attached a codepen find on this forum , i have really no idea to perform that..seems doesn't work at all..


a good exemple is the jquery ui sortable viewable here : http://jqueryui.com/sortable/


I'm very open to any advises or others strating exemples.. 



See the Pen qfKtm?editors=001 by ap-o (@ap-o) on CodePen

Link to comment
Share on other sites


no i didn't able to make any progress, i dont want to work with jquery, im focusing on greensock draggable;

I am cusrious to know if anybody built this with GSAP , as i said i didn't find the way to achieve it, but peraps there are some greensocks guru on this site,

i dont give up to see a new starting example for a sortable features

Link to comment
Share on other sites

My suggestion wasn't to necessarily use jQuery; just to read their source code as an example. Their logic is just as viable as non-jQuery logic, so even if you don't use jQuery to implement, it's still a good place to learn if you don't know where to start.


A basic way to calculate it might be to assume all elements are equal height:

onDrag:function() {
  var indexChange = Math.round(this.y / this.target.offsetHeight);
  var bound1 = /*index of this.target inside its container*/;
  var bound2 = bound1 + indexChange;

  if (bound1 < bound2) {
    // new index is higher - move elements up
  } // etc
Link to comment
Share on other sites

I'm not sure if it's because chagui keeps editing their posts or if I'm just being dumb right now - what's the dataTransfer object?


Lol... you're good! That post I made had nothing to do with chagui. Sorry if that confused you.


I was just curious about being able to use native HTML5 Drag and Drag functionality with the Draggable utility, specifically the dataTransfer object, which allows you to get/set clipboard data.



Link to comment
Share on other sites


i'm sorry so say, i resign lol ; I took many time, and my think is some option with hitest will be warmly welcome...

i mean i easely know  how to achieve it if you give me something like this :  this.hitest.y  !

Here one of the bigger pb is , how do you know the actual direction of draging element ?! i am very curious to know.. :)

i can doing work in one direction only.


i attach my try, all advises and/or eplanation are welcome.


See the Pen rlyEh?editors=001 by anon (@anon) on CodePen

Link to comment
Share on other sites



As you mention and as you already have found out, this is not a minor thing to create. Right out of the box there are several things that come into my mind, snapping, positioning, CSS, lots of conditional logic, selecting elements before and after the one the user is dragging, etc. Still is a very interesting thing to create.


If you ask me I would start with creating elements with static dimensions and use hit test and live snapping to achieve this in the most simple way, remember that using snap you can pass an array of values and you could build that array with how many element's there are and their heights. If all have the same height is a very simple loop. Then you'll have to take care of the starting position of the element being dragged and the drag direction, among other things.


I created a simple codepen that shows, with some little conditional logic, the dragging direction, take a look at it:


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


Hopefully this will help a little.



  • Like 3
Link to comment
Share on other sites

Hi rodrigo and thanks for your input,


Unfortunatly , you don't get the really direction with this kind : we don't know what element will be drag in first,

we will don't know his future position direction, use y position will be a fake solution and simply doesn't work for a sortable feature i guess...

Really, now immagine we can have the hitest element position with a this.hitest() method, the whole feature will be finish in hour..

So are you agree to say , this method to take the actual element hitest position lacking here...

I love draggable but it need more flexibility here. I just try to achieve this with GSAP because i love ur library and i 'd like to enlarge some building plugin..

This king of feature is actually achievable in hour with pure javascript, so , for a draggable plugin i guess it should be easier, its the plugin idea i think.

anyway, ur library is very good and i discover it each day, but something lake here, im pretty sure..

Now after some hours spent to perform that, i am very curious and open to see anyone achieve this feature with draggable;

i will love to see someone show me how many lines you need to do it., im not sinic, its just an objective things.



Link to comment
Share on other sites

Blake - I'm not too familiar with the HTML5 API for this. I investigated it a few years ago but it seemed like browser support (IE?) was quite lacking and never went back to it. I'm not sure how the dataTransfer object is used, but if it requires letting the browser handle drag and drop natively, then it's probably going to be difficult to integrate with Draggable.

Link to comment
Share on other sites



Actually you cannot get the y position of the hitest element, you can set an action if this histest but you have not any control of the hitest element...

I spent time to make a try with GSAP because i like this library qnd i'd like to see them bigger tomorow, thats the opensource spirit thats all..

Link to comment
Share on other sites

I'm not sure if it's the language barrier or something else, but I don't really understand the problem you're having with hittest. Could you explain more about what you think is missing, and what y position you are referring to?


I actually don't think hittest-ing is really necessary to create this effect, but I'm sure it will make more sense once I have a better idea of what you're trying to do with it.

Link to comment
Share on other sites

What i mean by " this.hitest() " , lets say  you have a collision betwean two elements  A and B,

you have all information about A with " this "  and "  if (this.hitTest("#B")) " will return you true .

well #B is the hited element here , and i want to take easely more than a true collision , lets say

the lasthited element   ..  In a list of sortable example, this.lasthited could return the last hited element

immediatly directly from API(without need extra loop), then we could just replace the this position(A)  by this.lasthited(B here) , and the sortable code is pretty made, there are  so much case who thats could be usefull..  hope u understand my example..


Anyway , Thanks for you input ,You are a greensock guru thats sure , for a 10min work(really??),thats  works pretty good(at least) :)

Link to comment
Share on other sites

Jamie - Drag and Drop has actually been part of IE since version 5 if you can believe that. But if you could use the dataTransfer object, it could greatly simplify this problem. The problems is that the Draggable utility sends a mouse event and not a drag event. I tried triggering a drag event on the mouse events, but I still couldn't set the data object. Oh well, your solution looks really nice.

  • Like 1
Link to comment
Share on other sites

Hi guys :)


hey chagui , this is what U're looking for :


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


but actually this is a useless code until this level , Since with that you can sort every thing just in visual without changing the DOM Elements , but in the other hand ; jamie's solution works great with DOMs . press ctrl+shift+c and u see what i mean , at least that's i know :)

  • Like 2
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...