1.0.13 • Published 4 years ago
dragpos v1.0.13
Dragpos
Dragpos is typescript library. Helps to rearrange the list.
Demo
https://sosisusy.github.io/dragpos/
Getting Started
install
npm i dragpos
import
<script src="dragpos/dist/dragpos.js"></script>
<script>
const dragpos = new DragPos(element, option)
</script>
import DragPos from "dragpos"
const dragpos = new DragPos(element, option)
example
import DragPos from "dragpos"
// Alignment helper registration for nodes with example class
const dragpos = new DragPos(document.querySelector(".example"), {
backgroundColor: "#eee"
})
// Existing helpers are not erased and new helpers are added
const e2 = document.getElementById("example2")
dragpos.new({
ele: e2,
handler: ".handler", // selector
backgroundColor: "#eee",
onDragEnd: (e, option) => {
fetch("http://example.com/")
.then(res => res.text())
.then(res => console.log(res))
}
})
method
Method | Params | |
---|---|---|
constructor | element , option | Create new list helper |
new | option | Create new list helper |
option
Attribute | Type | |
---|---|---|
ele | HTMLElement String | Specifying a list container |
group | String | Group naming |
handler | String | Assign handler |
backgroundColor | String | Specify background color |
fontColor | String | Specify font color |
fontSize | Number | Specify font size |
fontFamily | String | Specify font |
animation | Number | Animation rate |
Listener | Params | |
---|---|---|
onDragStart | Event , Option | Occurred when the dragging starts |
onDragOver | Event , Option | Occurred when the dragging over |
onDragEnd | Event , Option | Occurred when the dragging ends |
onChange | Event , Option | Occurred when element is changed |