drag-drop-sort

Dom element drag-and-drop sorting function, and return the sorted elements

Usage no npm install needed!

<script type="module">
  import dragDropSort from 'https://cdn.skypack.dev/drag-drop-sort';
</script>

README

DragDropSort

Useage

  • In the react development, an example of the component DragDropSort is referenced:
class Demo extends Component {

  data() {
    return [{
      label: 'button'
    }]
  }

  getReturnData(data) {
    <!-- get the sorted data, return data of type array -->
  }

  render() {
    let items = [];
    this.data.forEach(item => {
      items.push(<button>{item}</button>);
    });

    return <div>
      <DragDropSort data={data} callback={getReturnData} dragTag="button">
        {items}
      </DragDropSort>
    </div>
  }
}

Options

  • You can set the options to drag-drop-sort.
Name Type Default Description
data {Array} [] the Data used to render lists for sort.
callback {Array} [] Returns sorted data.
dragTag {String} undefined the tagName of the specified drag child element.
  • Here's an example webpack config illustrating how to use these options
<DragDropSort data={data} callback={getReturnData} dragTag="button">
  {items}
</DragDropSort>

Remark: The array element needs to contain the label attribute.

Install

npm install drag-drop-sort --save