import React, { useState, useRef } from 'react';
import '../index.less';

interface IProps {}

const Index: React.FC<IProps> = () => {
  const guideList = useRef<any>();
  const sourceNode = useRef<any>();

  const outerDragStart = (e: any) => {
    setTimeout(() => {
      e.target.classList.add('moving');
    }, 0);
    sourceNode.current = e.target;
    e.dataTransfer.effectAllowed = 'move';
  };
  const outerDragEnter = (e: any) => {
    e.preventDefault();
    if (e.target === guideList.current || e.target === sourceNode.current) {
      return;
    }

    const children = Array.from(guideList.current.children);
    const sourceIndex = children.indexOf(sourceNode.current);
    const targetIndex = children.indexOf(e.target);
    if (sourceIndex < targetIndex) {
      guideList.current.insertBefore(sourceNode.current, e.target.nextElementSibling);
    }
    if (sourceIndex > targetIndex && targetIndex >= 0) {
      guideList.current.insertBefore(sourceNode.current, e.target);
    }
  };
  const outerDragEnd = (e: any) => {
    e.target.classList.remove('moving');
  };
  const outerDragOver = (e: any) => {
    e.preventDefault();
  };

  return (
    <div
      className='list'
      onDragStart={outerDragStart}
      onDragEnd={outerDragEnd}
      onDragEnter={outerDragEnter}
      onDragOver={outerDragOver}
      ref={guideList}
    >
      <div draggable className='listItem'>
        <span>111111</span>
        <span>呜呜呜呜</span>
      </div>

      <div draggable className='listItem'>
        <span>222222</span>
        <span>呜呜呜呜</span>
      </div>

      <div draggable className='listItem'>
        <span>333333</span>
        <span>呜呜呜呜</span>
      </div>

      <div draggable className='listItem'>
        <span>444444</span>
        <span>呜呜呜呜</span>
      </div>

      <div draggable className='listItem'>
        <span>555555</span>
        <span>呜呜呜呜</span>
      </div>
    </div>
  );
};

export default Index;