search

taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.32k stars 783 forks source link

Support request + possible bug report: seeking assistance on use with React. #958

Closed laurencefass closed 2 years ago

laurencefass commented 2 years ago

If you've found something that looks like a bug, include a link to a minimal demo on JSFilddle, Codepen with instructions to reproduce the bug with and roughly follow the following issue description format:

Problem: I am trying to write a data driven drag and drop demo using React JS. I may have found a potential bug with interact JS as I've never seen this behaviour in React before, but im not entirely sure where the bug lies yet.

Here is the demo. Please note Ive added some JSON debug into the code so you can see where the actual items reside in data, as opposed to where they are rendered. https://codesandbox.io/s/interactjs-grouped-draggables-xs5ju2

Test passes: I can drag single items into, out and between the droppable zones and I can store one or more in a single zone. I can drag single items from a mutiple item set stored of a zone but only in reverse order.

Test fail: If I try to drag an intermediate item, i.e. one that is not the end of the list, the item succeeding it is transformed and the "candrop" class is applied to it though I cannot see where this occurs and it is not showing up in the console log.

Expected behavior

If I drag an intermediate item from a group of items, the item after it should not be transformed.

Actual behavior

See above: If I try to drag an intermediate item, i.e. one that is not the end of the list, the item succeeding it is transformed and the "candrop" class is applied to it though I cannot see where this occurs and it is not showing up in the console log.

It doesnt matter where in the set the draggable item resides it always appears to drag the next item - and only the next item with it. i.e. in a set of 5 items if i drag 3 to another group, 4 (but not 5) will be erroneously transformed though in data in remains in the correct grouping.

System configuration

interact.js version: "interactjs": "^1.10.11", Browser name and version: chrome Version 99.0.4844.51 (Official Build) (64-bit) Operating System: windows 10

laurencefass commented 2 years ago

this was a react issue fixed it adding a random key on the draggable items. i guess React was reassigning DOM elements and applying the wrong transforms.