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