在react-antd中实现拖放效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq8241994/article/details/88747452

过年回来就没有做过博客了，年初公司的事情有点多，耽误了。

进入正题：

最近的项目中涉及到了拖放的问题，特地记录一下：

这个其实和js原生的拖放基本一致

 1.在需要拖动的元素上：

<Tag
 draggable={true}
 onDragStart={(e)=>this.tragStart(e,别的参数)}
 closable
 onClose={e=>this.delNode(e)} 
>
    标签内容
</Tag>

2.在放置的元素上：

<Card>
    <Card.Grid
      onDrop={(e)=>this.drop(e)}
      onDragOver={(e)=>this.dragOver(e)}
    >
       放置元素内容
    </Card.Grid>
</Card>

3.对应的事件

// 拖拽开始
dragStart=(e,item)=>{
    e.dataTransfer.setData('item',JSON.stringify(item));// 拖拽元素携带的数据
}

// 拖拽元素经过放置元素时
dragOver(e)=>{
    e.preventDefault();// 此处的代码是必须的  不然无法拖拽
    console.log('拖拽中')
}

// 拖拽元素放到放置元素时
drop(e)=>{
    e.preventDefault();
    // 放置之后的后续操作
    .
    .
    .
}

-----------------------------------------------------------------------------------

记录一些antd-pro使用中遇到的一些小坑

--在有侧边栏的情况下，菜单项acls父菜单一定要在子菜单的前面，不然菜单会显示异常

--dva中在一个effect中调用另外一个effect时需要用到：put({type:'',payload:{}})