Sortable One column grid of existing tiles

[Afrowave]

Hi @OSUblake

I ripped your "Sortable Grid Using GreenSock Draggable" pen to see how I could get to a number of tiles that are in one column. I am gobsmacked by the thinking behind this odd 300 lines of code as I tried weeding out what I don't need. ?

 

I would like to make a sortable "column" of pre-existing tiles with content that have snippets of a journey. The tiles are to be sorted in a particular way to so that they follow are particular sequence of event. Once sorted, they do a "ta daaa!" through some function.

 

I tried wilting down to just I would need but I found that the code is built to work with dynamically generated tiles and undoing what you have done is some work. Just looking at the `createTile()` with`Draggable()` in it is looking at a work of art. ?

 

So, two questions.

First, how did you go around planning this something like this? Just some points about the thinking around it.

Secondly, since a lot of your code is for dynamic tiles/tiling, how would static tiles be laid out?
 

See the Pen dybdvgZ by Afrowave (@Afrowave) on CodePen

[OSUblake]

Thanks!

 

1 hour ago, Afrowave said:

First, how did you go around planning this something like this? Just some points about the thinking around it.

 

That was almost 5 years ago, so I really don't remember. I had previous experience working with grid layouts, so it wasn't something new to me. I think I got the idea for layout behavior from this Chrome extension.

https://chrome.google.com/webstore/detail/modern-new-tab-page/ogllliimbhgmclkgjldeffhjbhaenapo

 

 

1 hour ago, Afrowave said:

Secondly, since a lot of your code is for dynamic tiles/tiling, how would static tiles be laid out?

 

Just a quick modification.

 

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

 

 

If your tiles are going to be the same height, this will probably work better.

 

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

 

The concept is pretty simple. It keeps track of everything in a virtual grid (an array of arrays). A cell in the grid is either occupied or empty, and you of course can't move something into an occupied space.

 

 

 

More information about how it works, and a single column demo.

 

 

 

[Afrowave]

Quote

The concept is pretty simple. It keeps track of everything in a virtual grid (an array of arrays). A cell in the grid is either occupied or empty, and you of course can't move something into an occupied space.

Interesting, very interesting. This loosely works the way React works with its virtual DOM. 

 

Thanks @OSUblake. Let me go through this and give it a try. I will look look at the "other" code I had done and compare.

Virtual grid, you say ...

 

[zelcie]

My challenge is  then rowSize is unknown, and each element could be different height size. I'm building something like deep nested list of items. nested list should be sortable also. Plus another action Add/Remove item could change elements count.  

  list 1 
	list 1 item 1
	list 1 item 2  
  list 2
	list 2 item 1
	list 2 item 2
	list 2 item 3
    	list 2 item 3 item 1
		list 2 item 3 item 2	
...			

Parent list should be sortable, Children should be sortable also. Children count unknown
Suggestion, ideas and code sample are welcome.  

[ZachSaucier]

Hey @zelcie and welcome to the GreenSock forums!

 

If you want help with something specific, it's best to clearly state what you're having trouble with. Providing a minimal demo demonstrating the issue along with your description makes it much more likely that you'll get quick help. It might make sense to start a new thread. The below thread has more information on how to do so: