Point Emitter
A small library that help you drag and drop an element much easier, make your code more elegent
Live demo
See point-emitter.vercel.app for live demo
Features include:
- Simple, easy to use
- Flexible approach to data, with customisable functions
Install
$ yarn add point-emitter
How to use:
// query an elementconst your_element = document; const otps = longPressThreshold: number // emit touchstart after 250ms (default) gridMovement: number // move element in a grid layout with specific value (default is 0) saveMouseCoords: boolean // keep the initial shift of the element relative to the pointer (default is false) // set a ghost el behind your_element // create if enable is true and vice versa (default is false if there is no ghost property) // style for modifing, if one of your styles is empty then ignore. Code below is example ;) ghost: enable: true style: background: "#fff" border: "1px solid lightblue" opacity: 05 boxShadow: "" color: "" ;// PointEmitter provides you 9 events that help your drag & drop an element much easier// initialize a PointEmitter instanceconst pe = your_element otps; /* automatically execute this event when you click if you enable your ghost element callback function (cbf) for modifiying ghost element, this cbf happens before append to body tag but after apply your style (*), so if your dont want to set your style above then you can do it here or do sth as you wish. (*): { applying style... cb(); appending to body... }*/pe; // when you click, execute this eventpe; // when you slightly move your mouse, execute this eventpe; // when you move your mouse, execute this eventpe; // when you stop and release your mouse, execute this eventpe; // when you click, execute this eventpe; // when you db click, execute this eventpe; // when your element touches window edges, execute this eventpe; // when press any key, execute this eventpe; // when you have some actions like destroy or something like that, call destroy function// pe.destroy(); // And, that's it. Happy coding!