1.1.2 • Published 2 years ago
@plusnew/dnd v1.1.2
plusnew-dnd
This library is for typesafe drag-and-drop in plusnew Beware that this is a very abstract drag and drop library, this library does no dom handling whatsoever.
import plusnew, { component } from '@plusnew/core';
import dndFactory from '@plusnew/dnd';
// Create a drag-and-drop container
const drag = dndFactory<{id: number}>();
document.addEventListener('mouseUp', () => drag.store.dispatch({ type: "DRAG_STOP" });
const Component = component(
'ComponentName',
() =>
<span
onmouseMove={(evt) => drag.store.dispatch({ type: "DRAG_MOVE", position: { x: evt.clientX, y: evt.clientY }})}
>
<drag.Component
// onDrop gets called when drag stop happened, no matter where it gets dropped
// if you want to track if it got dropped above an dom element here,
// than you need to track that yourself with mouseenter and mouseleave
onDrop={(dragEvent: {x: number, y: number, payload: { id: number }}) => {
console.log(dragEvent.deltaPosition.x, dragEvent.deltaPosition.y); // In these variables are the delta positions, how much it moved compared to the startPosition
console.log(dragEvent.payload); // This contains the payload value which was called at drag.startDrag
}
}>{(dragState): { active: false } { active: true, deltaPosition: { x: number, y: number }, payload: { id: number }} =>
<span
onmouseDown={evt => drag.store.dispatch({
type: "DRAG_START",
position: {
x: evt.clientX, // start position
y: evt.clientY,
},
payload: {
id: 0
}
})}
/>
}</Drag>
</span>
)
1.1.2
2 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
1.0.0-beta.1
4 years ago
1.0.0-alpha.2
4 years ago
1.0.0-alpha.1
4 years ago
0.6.53
5 years ago
0.6.44
5 years ago
0.6.42
5 years ago
0.6.41
5 years ago
0.6.38
5 years ago
0.6.37
5 years ago