;\n}\n```\n\n`NOTE`: `dragPropsChange` is currently an experimental feature.\n\nThe interface does not depend on the browser API and can be implemented for other platform usage.\n\nThus, a vanila js implementation of a draggable Node might look like:\n\n```js\nconst observer = HtmlDndObserver();\nconst draggable = document.getElementById(draggableId);\n// attach to dragStart events (mousedown, touchstart) on the HTMLElement\nconst destroyDraggable = observer.makeDraggable(draggable, {\n dragProps,\n onDrag: ({ deltaX, deltaY }) => {\n draggable.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;\n },\n onDrop: () => {\n draggable.style.transform = \"initial\";\n },\n});\nconst droppable = document.getElementById(droppableId);\nconst onDrop = state => {\n if (droppable.contains(state.current.target)) {\n console.log(`Dropped ${state.dragProps} on droppable`);\n }\n};\nconst destroyOnDropListener = observer.on(\"drop\", onDrop);\n\n...\n// finally, a cleanup example\ndestroyDraggable();\ndestroyOnDropListener(); // or observer.off(\"drop\", onDrop);\nobserver.destroy();\n```\n\nOr, if you can't use hooks, but only a class is available for you\n\n```jsx\nimport { withDndContext, DragContext } from \"react-draggable-hoc\";\n\nconst MyComponentWithDndContext = withDndContext(DragContext)(\n class MyComponent extends React.Component<{ dragProps: any }> {\n componentDidMount() {\n this.destroy = this.props.observer.makeDraggable(this.c, {\n dragProps: this.props.dragProps,\n });\n }\n\n componentWillUnmount() {\n this.destroy(); // this is actually not necessary, since the node will be removed anyway.\n }\n\n render() {\n (this.c = c)} />;\n }\n },\n);\n```\n\n---\n\n## THIS IS THE TITLE PAGE OF THE DOCUMENTATION. FULL API DESCRIPTION WILL FOLLOW. THE DEMO MIGHT ALREADY CONTAIN SOME EXAMPLES.\n","readmeFilename":"README.md"}