Unexplainable Drag Bug

[VladAnton991]

Hello and thanks so much for the amazing library!

It works great in my project, but I seem to have one bug, and I can't explain what happens.

All I know is that, for a grid of items, where the DragHandler is set as an absolute layer, over the item, so that you can click anywhere on it, and drag , it sometimes doesn't trigger the drag event, and you only drag around the image of the item.

I followed the demo-grid configs, like so:

{ layoutOnInit: false, layout: { rounding: false, fillGaps: false, }, showDuration: 400, showEasing: 'ease', hideDuration: 400, hideEasing: 'ease', layoutDuration: 400, layoutEasing: 'cubic-bezier(0.625, 0.225, 0.100, 0.890)', dragEnabled: false, gridSettings.dragEnabled = true; gridSettings.dragHandle = '.item__handle'; gridSettings.dragContainer = dragContainer; gridSettings.dragRelease = { duration: 400, easing: 'cubic-bezier(0.625, 0.225, 0.100, 0.890)', useDragContainer: true, }; gridSettings.dragPlaceholder = { enabled: true, createElement(item) { return item.getElement().cloneNode(true); }, }; gridSettings.dragAutoScroll = { targets: [window], sortDuringScroll: false, syncAfterScroll: false, }; }

Here is a video demonstrating the problem:

https://user-images.githubusercontent.com/104755416/211315420-0a88dbb5-3ee9-4e29-b1d2-f5100237f667.mp4

Any idea what would be the problem? Many thanks!

[niklasramo]

Seems like browser's native drag and drop is kicking in sometimes there (when the buggy behavior occurs). Have you tried setting draggable="false" attribute to the draggable elements? That should prevent native dragging from interfering.

Also, would be very helpful if you provided a codepen/sandbox where this issue could be better investigated :)

[VladAnton991]

That seemed to be it!

draggable="false" on the main grid item element, (the handler elements already have this on them)

Thanks a lot!