Releases: tajo/react-movable
v3.4.1
v3.4.0
v3.3.1
v3.3.0
Library exported as ESM
The library is now pure ESM and it can't be loaded through require() anymore.
Add the container prop
container
container?: Element;Provide custom DOM element where moved item will be rendered.
Handle interactive elements
When you start putting things like inputs into your list items, you could get into troubles. React Movable is now smarter and ignores mouse/keyboard inputs when you are trying to type or click. There's a new example:
Also, all deps are updated and React Hooks in all examples.
Add Drop Animation
The drop is now animated so it provides user a nice visual feedback. Previously, it just re-appeared in the final position. The length of animation is controlled by the transitionDuration prop.
This release also fixes a bug when an item move far top didn't end up reordered.
Before
After
Remove items by moving them out of bounds
There is a new removableByMove top API that will allow you to remove items when being moved far left or right. PR. Example.
This also adds targetRect as an another parameter that's being passed to you through onChange callback. This can be useful when you want to detect where exactly the item was dropped.
beforeDrag and disabled items
There is a new top level API beforeDrag that allows to do some measurements of elements and implement a table with dynamic column widths.
Items now recognize disable: true prop that prevents them to be dragged. Example.
/* ... */
state = {
items: [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' },
{ label: 'Item 4', disabled: true },
{ label: 'Item 5', disabled: true },
{ label: 'Item 6' }
]
};
render() {
return (
<List
values={this.state.items}
/* ... */