过年回来就没有做过博客了,年初公司的事情有点多,耽误了。
进入正题:
最近的项目中涉及到了拖放的问题,特地记录一下:
这个其实和js原生的拖放基本一致
1.在需要拖动的元素上:
<Tag
draggable={true}
onDragStart={(e)=>this.dragStart(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:{}})