Prevent or exclude certain elements in list to be dragged

[chanmathew]

Hey folks,

I have a 2 column setup where on the left side of the DND zone are static elements that relates to each draggable element, but doesn't need to be included in the drag animation. How would I go about structuring this to avoid dragging?

I saw https://github.com/isaacHagoel/svelte-dnd-action/issues/386 but my setup is a bit different, the columns are side by side, but they both need to be in the DND zone as I'm trying to create a timeline that lines up with the cards on the right that are draggable:

[isaacHagoel]

usually the easiest solution is to put the static elements outside of the parent div that contains the draggable elements (a.k.a the dnd zone)

[chanmathew]

Hey @isaacHagoel - Thanks for your response. I did try that but the challenge is that the dots/timeline on the left need to line up and correlate to the Y position of the cards on the right, and therefore it needs to be within the same "loop" in my application. Is there any other solution within the capabilities of the library?

Otherwise an alternative that I was thinking, would be to use javascript to get the height of each card, then make sure the height of the lines on the left match up, which will be more difficult to achieve.

[isaacHagoel]

i think you can achieve this alignment relatively easily with a nested grid. here is an example (in reality you won't name every area just make sure they have the same number of rows), notice how ".dnd container" has its own div for the dnd zone.

[chanmathew]

Ahh that did the trick, thanks for your help!