在react-antd中实现拖放效果

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

进入正题:

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

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

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

this.tragStart(e,别的参数)}
 closable
 onClose={e=>this.delNode(e)} 
>
    标签内容

2.在放置的元素上:


    this.drop(e)}
      onDragOver={(e)=>this.dragOver(e)}
    >
       放置元素内容
    

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:{}})

 

你可能感兴趣的:(在react-antd中实现拖放效果)