react怎麼實作拖拽

拖拽其實用h5的設定元素draggable就可以了，看代碼就可以了

拖拽容器

import React from 'react';

// 拖拽容器
const Draggable = props => {
  const  { dragRef, dragItem, handleDragStart } = props
  const img = new Image(); 
img.src = 'https://drag.png'; // 拖拽時的圖檔可以更改，一定要先設定src，再setDragImage，不然就找不到這個圖檔
  const onDragStart = (e) => {
  //e.dataTransfer.setData('sendInfo', dragItem);
     e.dataTransfer.setDragImage(img, 0, 0);
    if (handleDragStart) {
      handleDragStart(e, dragItem)
    }
	};
  return (
    <div ref={dragRef} id={dragItem} draggable  onDragStart={onDragStart}>
      {props.children}
    </div>
  )
}

export default Draggable;
           

放置容器

import { message } from 'antd';
import React from 'react';

// 放置容器
const Dropable = props => {
  const  { dropRef, handleDrop, handleDragOver, handleDragEnd } = props
  	const  onDrop = (e) => {
    e.preventDefault();
    
    const targetId = e.target.parentNode.id
    if (handleDrop) { // 放置後回調
      handleDrop(e,  targetId)
    }
  };
  	const onDragEnd = (e) => {
      e.preventDefault();
      if (handleDragEnd) {
        handleDragEnd(e)
      }
  };
  	const onDragOver = (e) => {
    e.preventDefault();
    if (handleDragOver) {
      handleDragOver(e)
    }
	};
  return (
    <div ref={dropRef} onDrop={onDrop} onDragOver={onDragOver} onDragEnd={onDragEnd}>
      {props.children}
    </div>
  )
}

export default Dropable;
           

引入調用

import React, { useState, useRef } from 'react';
import Draggable from './draggable';
import Dropable from './dropable';

const AdjustAttendees = () => {
const dragRef = useRef();
const dropRef = useRef();
// onDragStart回調
const handleDragStart = (e,dragItem) => {
    e.dataTransfer.setData('sendInfo', dragItem);
    
  console.log('handleDragStart',e.target, dragItem);
}
// onDrop回調
const handleDrop = (e, targetId) => {
const info = e.dataTransfer.getData('sendInfo');
    const drag = e.target;
     drag.appendChild(document.getElementById(info));
  console.log('handleDrop',  targetId);

}
// onDragOver回調
const handleDragOver = e => {
  // console.log('handleDragOver',e);
}
// onDragEnd回調,checkList 拖動的元素數組
const handleDragEnd = (e) => {
  console.log('handleDragEnd',e.target);
}
return (
<div>
<Draggable  dragRef={dragRef} handleDragStart={handleDragStart} dragItem={candidateId} >
	<div className={style.attendTop}>
	123
	</div>
</Draggable>
<br />
<Dropable dropRef={dropRef} id={sessionId} handleDrop={handleDrop} handleDragOver={handleDragOver} handleDragEnd={handleDragEnd} key={sessionId}>
	<div>
	拖拽放到這裡
	</div>
	</Dropable>
</div>
)
}