develexe-sortable

Tool for development sortable components on JavaScript

Supports:

multi rows and cols,
size of item,
two sortable mode,
drag and drop with touching,
different content and style of item

Usage

Install packages in your project:

$ npm i --save develexe-sortable

Import 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()
    ...
};

Build

git clone https://github.com/chybatronik/develexe-sortable

Build

npm run build

License

MIT