search

tomalec / sortable-flexbox-list

Custom Element with sortable list, that uses CSS flexbox
8 stars 3 forks source link

Classic example? #5

Closed dandv closed 9 years ago

dandv commented 9 years ago

The examples look a bit rough, but the component does seem to work.

Can you maybe add a simple classic example like this one for Sortable?

tomalec commented 9 years ago

Thanks for feedback @dandv ! I'm not sure, what do you mean by simple classic example - the fact that it does work with external CSS libraries?

Here is your example cloned with <tomalec-flexbox-list>: http://jsbin.com/vorivo/4/edit I seems much cleaner from HTML point of view than one with Sortable ;) however it does not support handles.

If you like I can post it on demos list on github.io.

dandv commented 9 years ago

Very nice! Just what I was looking for. Would be great if you can add it as a demo.

tomalec commented 9 years ago

Here you have http://tomalec.github.io/sortable-flexbox-list/examples/simpleWBootstrap.html Would you like to add something more?

dandv commented 9 years ago

Looks good! Is there a way to add a drop target, like in this example?

dandv commented 9 years ago

There's also an inevitable problem with the (nifty) idea of not reordering the elements in the DOM but just using flexbox: the style of the first element is carried with it even after it's moved and no longer the first. This is barely visible in the Bootstrap example but you can see the upper left corner of the first <li> being a bit rounded. Easy to work around by not styling the first item in any special way, but maybe worth mentioning as a gotcha?

tomalec commented 9 years ago

Is that what you mean https://github.com/tomalec/sortable-flexbox-list/blob/f7a8011de4784597fb680db83b0eda879921f0f0/examples/simpleWBootstrap.html#L55 ? If not feel free to make pull request :)