packery icon indicating copy to clipboard operation
packery copied to clipboard

Changing DOM order after drag and drop

Open Gleb-Tocarenco opened this issue 11 years ago • 6 comments

it is possible to change DOM elements after changing their location with packery?

Gleb-Tocarenco avatar Mar 26 '14 11:03 Gleb-Tocarenco

Here's an example that uses Draggabilly and changes the order once it's been 'dropped' http://codepen.io/chriscoyier/pen/BvcKq

It was written up in CSS Tricks!

http://css-tricks.com/draggable-elements-push-others-way/


+1 this issue if you would like to see this feature added to Packery.

desandro avatar Mar 27 '14 00:03 desandro

There is a bug on your code,

http://codepen.io/desandro/pen/cbhDG

When you drag the "first" item to the "last one" the DOM doesn't change and error in console appear.

Do you have any ideas? I'm really struggling to find the error.

I will appreciate all your help

jcdsr avatar Oct 17 '14 09:10 jcdsr

Good catch, fixed! http://codepen.io/desandro/pen/cbhDG

desandro avatar Oct 17 '14 20:10 desandro

The other issue I have is if I have like 40 or 60 items long on the page, the page doesn't scroll with the item I'm dragging. Like if push item 40th to 1st on the top. Make sense

jcdsr avatar Oct 21 '14 11:10 jcdsr

@carlosdv4 Yes. I've documented that feature request in desandro/draggabilly#1

desandro avatar Oct 21 '14 13:10 desandro

@desandro Thanks for the code, but I notice that your code is only for one-dimensional identically shaped DOM elements. How would it work for a two-dimensional grid with elements of varying size?

In this case some elements are moved to fill in space, but the DOM doesn't get updated for those elements that are automatically moved. How would you modify the DOM for those automatically moved elements?

dbockenfeld avatar Dec 02 '15 16:12 dbockenfeld