Sorting a grids is not smooth

[orionseye]

I am trying to implement the sortable to existing grid layout.
If you have a look at the grid demo, it has nothing in common with the initial fork, where sorting is smooth and without issues. Any items can be dragged around, back & forth where placeholder & target are easy to understand
http://farhadi.ir/projects/html5sortable/

While on your demo, the grid items are jumping around, once dragstart is initialized, difficult to follow the logic (for an average user). Furthermore, (e.g) once you drag item 1 after item 2 , it becomes a mess to drag it back to its initial position
Is it as it has to be, or just a bug?

Same happens on my own grid layout

[lukasoppermann]

Hey, this is somewhat of a bug, yes. To allow for other features and fix some issues we had to change a lot of things which lead to the current behaviour.

To fix this I assume you would have to improve the logic for dead zone calculation and for targeting which item is before the current.

I would very much appreciate if you could look into it and send a PR to fix this.

[heyyo-droid]

I made a cope pen to better identify the bugs I also have with drag and drop with CSS grid.
https://codepen.io/heyyoyo/pen/LYzyWMB

1. Moving Block 1, we can see the placeholder lost the width of the dragged element
2. Moving Block 2, placeholder displayed is correct, but it seems only half height is used, because other elements move as if the dragged element was half height.

I suppose it will be great, if the placeholder could use the same css class than the dragged element. and keep exact dimension of the dragged element.

[heyyo-droid]

1. Was fixed by using last version of the library 0.13.3, i was using old one.
2. What do you think of adding an option to list all css class which should be kept from the dragged element ?

// set placeholder height if forcePlaceholderSize option is set
if (options.forcePlaceholderSize) {
    store(sortableElement).placeholder.style.height = draggingHeight + 'px';
    store(sortableElement).placeholder.style.width = draggingWidth + 'px';
}
// Should be in option
options.keepCssClass = ['grid-col-2','grid-row-2'];

options.keepCssClass.forEach(className => {
    // Only needed because placeholder is global we need to reiniatilize it to avoid keeping previously added class
    store(sortableElement).placeholder.classList.remove(className) 
    if(element.classList.contains(className)) {
        store(sortableElement).placeholder.classList.add(className)
    }
});

[lukasoppermann]

Hey @heyyo-droid that is an interesting ideas,
If you want to send a PR that would be great.

[heyyo-droid]

Hi @lukasoppermann
I just opened one(my first one on github), #854
Waiting for your review.
Thanks !