Fix for images

[a-drewsky]

I don't know if this has been addressed but it took me an hour to figure out. If you want to use images in the grid items you have to add onDragStart={(e) => {e.preventDefault()}} to the img element.

[Alexandr]

This was a bit laggy at first, but then started working beautifully, thank you!

[craigcosmo]

@a-drewsky do you have problem with the order after dragging?

function onChange(sourceId, sourceIndex, targetIndex, targetId) {
		const nextState = swap(items, sourceIndex, targetIndex)
		setItems(nextState)
	        console.log('items', items)
	}

in this code I tried to see the state in console after dragging. The console will show the previous state now the after dragging. Any idea why ?

[mleister97]

Thanks!

[Tyler]

@a-drewsky do you have problem with the order after dragging?

function onChange(sourceId, sourceIndex, targetIndex, targetId) {
		const nextState = swap(items, sourceIndex, targetIndex)
		setItems(nextState)
	        console.log('items', items)
	}

in this code I tried to see the state in console after dragging. The console will show the previous state now the after dragging. Any idea why ?

(I realize this comment is a bit old, but figured I'd answer anyways.)
This is simply how React works. After calling your setter function from the useState hook, the new value of your state will not be reflected in the state variable until the next iteration of the event loop. This makes it so that each iteration of the loop has a consistent snapshot of the state of your application.