Tool for development sortable components on JavaScript
- multi rows and cols,
- size of item,
- two sortable mode,
- drag and drop with touching,
- different content and style of item
Install packages in your project:
$ npm i --save develexe-sortableImport Sortable class:
import Sortable from 'develexe-sortable';Use Sortable class:
sortable = new Sortable(
cellWidth, // set width item
cellHeight, // set height item
cellSpacing, // set distance between items
mode, //set sortable mode: "SWAP" or "SORT"
cells, // array of items with options
isDropOnEmptyAreaAllowed // allow to move on empty area
);
state = sortable.get_state();Add events:
window.addEventListener('touchmove', handleTouchMove);
window.addEventListener('touchend', handleMouseUp);
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
handleTouchStart = (key, pressLocation, e) => {
if(!this.props.isGridLocked){
// console.log("handleTouchStart", key, pressLocation, e.touches[0])
handleMouseDown(key, pressLocation, e.touches[0]);
}
};
handleTouchMove = (e) => {
if(!this.props.isGridLocked){
e.preventswipe();
handleMouseMove(e.touches[0]);
}
};
handleMouseMove = ({pageX, pageY}) => {
sortable.handleMouseMove({pageX, pageY})
let st = sortable.get_state()
....
};
handleMouseDown = (pos, [pressX, pressY], {pageX, pageY}) => {
// console.log("handleMouseDown:::", pos)
sortable.handleMouseDown(pos, [pressX, pressY], {pageX, pageY})
let st = sortable.get_state()
...
};
handleMouseUp = () => {
sortable.handleMouseUp()
let st = sortable.get_state()
...
};git clone https://github.com/chybatronik/develexe-sortableBuild
npm run buildMIT