js原生拖拽

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

interface IProps {}

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

  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 (
    

      

        111111
        呜呜呜呜
      

      

        222222
        呜呜呜呜
      

      

        333333
        呜呜呜呜
      

      

        444444
        呜呜呜呜
      

      

        555555
        呜呜呜呜
      
    
  );
};

export default Index;