关于dragable选中div元素之后，传递内容并且改变元素自身状态，react原生h5实现

直接使用原生方法实现，

主要还是通过onDragStart事件在获取的默认值中的dataTransfer来进行传递data,

之后在需要被放置的元素中使用该方法获取对应的参数以及设置开启是否已经被放置来进行对已经拖动的元素的样式更改，

后续会继续添加关于，拖动div元素之后生成一系列流程图的操作此为第一版本

import { useState } from "react";
import './index.scss'
export default function  New3(){
  function allowDrop(ev)
{
	ev.preventDefault();
}
const [state,sets]=useState('on')
function drag(ev)
{
  console.log('ew',ev.target)
	ev.dataTransfer.setData("Text",ev.target.innerText);
	ev.dataTransfer.setData("choice","check");
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	var state=ev.dataTransfer.getData("choice");
  console.log(data,'datra',ev.target)
  if(state ==="check"){
    sets("off")
  }
	ev.target.innerText=data;
}
  return(<div> 
     <div draggable={true} onDragStart={(e)=>drag(e)} className={state==='on'?'on':"off"}>我是被传递的值</div>
    <div id="div1" style={{backgroundColor:"red",height:'200px'}} onDrop={drop} onDragOver={allowDrop}></div>

  </div>)
}