js-draggable-list

Make array elements draggable

Usage

HTML

<div id="content"></div>

JavaScript

import Draggable from 'js-draggable-list'

var drag = new Draggable({
  groupElement: document.getElementById('content'),
  dragElement: (e) => {
    return e.target
  },
  dragEnd: (pre, cur) => {
    ...
  }
})

When the component you created is destroyed, you need to destroy the drag(new Draggable)like this

drag.destroy()

Options

| option | type | default | Description | |-------------|--------------|--------------|--------------| | groupElement | HTMLElement | - | List parent element | | scrollElement | HTMLElement | - | List scroll element. If not passed, the default is the same as the groupElement | | dragElement | Function | (e) => e.target | Element node selected when dragging | | dragEnd | Function | (pre, cur) => {} | The callback function when the drag is completed | | cloneElementStyle | Object | {} | The style of the mask element when dragging | | cloneElementClass | String | '' | The class of the mask element when dragging | | delay | Number | 300 | animation delay |

methods

| method | Description | |-------------|--------------| | destroy | Destroy the component and empty its contents |