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.
importplusnew,{component}from'@plusnew/core';importdndFactoryfrom'@plusnew/dnd';// Create a drag-and-drop containerconstdrag=dndFactory<{id: number}>();document.addEventListener('mouseUp',()=>drag.store.dispatch({type: "DRAG_STOP"});constComponent=component('ComponentName',()=><spanonmouseMove={(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 mouseleaveonDrop={(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 startPositionconsole.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}}=><spanonmouseDown={evt=>drag.store.dispatch({type: "DRAG_START",position: {x: evt.clientX,// start positiony: evt.clientY,},payload: {id: 0}})}/>}</Drag></span>)