在react-antd中實現拖放效果

過年回來就沒有做過博客了，年初公司的事情有點多，耽誤了。

進入正題：

最近的項目中涉及到了拖放的問題，特地記錄一下：

這個其實和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:{}})