sortby-dnd

Sort by drag and drop.

Install

npm i sort-by-dnd -S

Usage

Javascript

newSortByDnd(element,{// ...option})// ornewSortByDnd(selector,{// ...option})

Vue

importVuefrom'vue'importSortByDndfrom'sort-by-dnd/dist/vueSortByDnd'// use directiveVue.use(SortByDnd)// use directive and setting global optionVue.use(SortByDnd,{// ...option})

<template><divclass="drag-container"
v-sortby-dnd="dndOption"><!-- ...elements --></div></template><script>exportdefault{data(){return{// configdndOption: {// ...option},// or Array// dndOption: [{// // ...option1// }, {// // ...option2// }],}}}</script>

Config

// defaults{accepts: null,// [{ container: DomSelector, relative: DomSelector, ignore: DomSelector, rule: MoveRule }, ...]draggable: '.item',handle: '',ignore: 'input, textarea',dragClass: 'drag',ghostClass: 'ghost',scrollEl: null,scrollSpacing: 80,scrollSpeed: 4,onDrag(DndEvent,MouseEvent){},onClone(DndEvent,MouseEvent){},onMove(DndEvent,MouseEvent){},onOver(DndEvent,MouseEvent,MoveRule){},onDrop(DndEvent,MoveRule){},onEnd(DndEvent,MouseEvent){}}

MoveRule

• prepend
• before
• after
• append

DndEvent

{item: Element,// drag elementfrom: Element,// from containerfromIndex: Number,// from indexto: Element,// to containertoIndex: Number,// to indexclone: Element// clone element}