react 拖拽移动元素位置，重新排序

---

记录咯

---

import React, { useState } from 'react';

const DraggableList = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
  const [draggedIndex, setDraggedIndex] = useState(null);

  const handleDragStart = (e, index) => {
    e.dataTransfer.setData('text/plain', index);
    e.target.style.opacity = '0.5';
    setDraggedIndex(index);
  };

  const handleDragEnter = index => {
    if (index !== draggedIndex) {
      const newItems = [...items];
      newItems.splice(draggedIndex, 1);
      newItems.splice(index, 0, items[draggedIndex]);
      setItems(newItems);
      setDraggedIndex(index);
    }
  };

  const handleDragEnd = e => {
    e.target.style.opacity = '1';
    setDraggedIndex(null);
  };

  const ys = () => {
    return {
      display: 'flex',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      flexWrap: 'wrap',
    };
  };

  return (
    <div style={ys()}>
      <h1>Drag and Drop Items</h1>
      <ul style={ys()}>
        {items.map((item, index) => (
          <li
            style={{ marginRight: '20px', cursor: 'grab' }}
            key={index}
            draggable
            onDragStart={e => handleDragStart(e, index)}
            onDragEnter={() => handleDragEnter(index)}
            onDragEnd={handleDragEnd}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DraggableList;