Cannot change the size of the dnd helper

[koljada]

Subject of the issue

My goal is to create a sidebar with widgets which can be dragged into the grid. I need to change the default helper to have configured size when dragging, it's not enough for me to have only the following shadow. And it seems like currently it's impossible to do because width and height styles are overridden in _setupDragFollowNodeNotifyStart -> _setupHelperStyle method. I tried to use start event handler but an original event is passed as a target so I can't access the helper element.

Your environment

• "gridstack": "^4.2.6"
• "vite": "^2.5.2"
• gridstack-dd-native
• Chrome browser

Steps to reproduce

https://jsfiddle.net/koljada/yfbjvg3h/13/

Expected behavior

There must be some way to modify dimensions of the helper

Actual behavior

It's not possible to modify dimensions of the helper

[adumesny]

thanks for posting a demo (and cool usage of grid pattern - possible because you know the fixed row/column count).

since you have gs-w/gs-h attributes from draggable, ideally the items would default to those cell height/width (minus margins). I have not paid too much attention to that part... will need to fix the sizing. Shouldn't have to redefine start/clone.

[giantroboticcat]

So this issue has been plaguing me as well, and I came up with a css hack involving variables that gets the job done.

I edited the original fiddle provided by koljada to illustrate the differences https://jsfiddle.net/zwhqp7y4/3/

The important tags could almost certainly be done away with by just targeting the element a bit better, but I was trying to change as little as possible in the fiddle so as not to overcomplicate the demo.

Hopefully this hack is helpful to others who have this use case and don't mind dirtying up their code a little bit for the sake of making things work as they need.

[adumesny]

@giantroboticcat thanks for the demo fix. yeah it should probably work out of the box when you specify w/h as a node, and also be reduced by the margin so the dragged item looks exactly like the dropped item (which your fix doesn't do).
Thinking more about it, if the main CSS styles where not

.grid-stack>.grid-stack-item[data-gs-width='1'] {
  width: 8.3333333333%;
}

but just .grid-stack-item[data-gs-width='1'] {...} then the helper could be set to have the same grid-item attr and match the dropped grid target if it also used grid-stact-item-content for margins.

[DigitagDev]

Does anyone have any workaround for this? I'm also almost pulling my hair out over this issue. Taking into account the previously posted jsfiddle, if you make the clone smaller than the element itself, everything becomes weird and messy. Even when trying to change the object's position through JavaScript, it seems to be overwritten later by the code. Here's a small example of making the clone smaller and the element larger in this jsfiddle.
https://jsfiddle.net/bodinho97/5jq1wzae/4/