sourcecode/front/src/components/DragList/index.js

import React from 'react';
import { Spin } from 'antd';
import Sortable from 'sortablejs';
import './index.less';
import { generateUUID } from '../../services/Tools';

export default class DragSortingTable extends React.Component {
  // sortableContainersDecorator = (componentBackingInstance) => {
  //   // check if backing instance not null
  //   if (componentBackingInstance) {
  //     const options = {
  //       handle: '.group-title-proxy', // Restricts sort start click/touch to the specified element
  //     };
  //     Sortable.create(componentBackingInstance, options);
  //   }
  // }

  sortableDecorator(componentBackingInstance) {
    // check if backing instance not null
    if (componentBackingInstance) {
      const options = Object.assign({
        // draggable: 'div.drag', // Specifies which items inside the element should be sortable
        handle: this.props.handle || '.drag', // this.props.handle, // Restricts sort start click/touch to the specified element
        group: this.props.group || generateUUID(),
        ghostClass: 'ghost',
        onEnd: (event) => {
          this.props.onMove(event.oldIndex, event.newIndex);
        },
      }, this.props.sortable || {});
      Sortable.create(componentBackingInstance, options);
    }
  }

  // sortableCategoryDecorator = (componentBackingInstance) => {
  //   if (componentBackingInstance) {
  //     const options = {
  //       // draggable: 'div', // Specifies which items inside the element should be sortable
  //       handle: '.cross_hair', // Restricts sort start click/touch to the specified element
  //       group: 'category',
  //       chosenClass: 'dangefeilei_choose',
  //       onEnd: (event) => {
  //         const id = event.item.getAttribute('data-id');
  //         this.moveCategory(id, event.newIndex + 1);
  //       },
  //     };
  //     Sortable.create(componentBackingInstance, options);
  //   }
  // }

  render() {
    return (
      <Spin spinning={this.props.loading}>
        <div className='drag-container'
          ref={(ref) => {
            if (ref) this.sortableDecorator(ref);
          }}>
          {this.props.dataSource.map((item, index) => {
            return <div className={`drag ${this.props.type}`}>{this.props.renderItem(item, index)}</div>;
          })}
        </div></Spin>
    );
  }
}