react dnd實現卡片拖拽排序

2021-09-29 23:41:50 字數 1754 閱讀 3166

最近工作中遇到乙個需求，需要對管理系統中的進行拖拽排序的功能

具體用到了react-dnd來實現

下面是乙個利用react-dnd實現的拖拽排序小demo

首先在react專案中執行以下命令

yarn add react-dnd

yarn add react-dnd-html5-backen

// cardtable.js


import carditem from './carditem'


import html5backend from 'react-dnd-html5-backend'


import react from 'react';


import  from 'react-dnd'


import './cardtable.less';


class cardtable extends react.component 


}  // 初始化資料


componentdidmount = () => 


this.setstate()


}  // 卡片重新排序


movesort = (dragindex, hoverindex) => )


}  // 卡片重新render


newrenderfn = () => )


}  render() )});


}}export default cardtable;
// cardtable.less


.cardtable
// carditem.js


import react from 'react';


import  from 'react-dnd'


import  from 'react-dom'


import './carditem.less'


let dragingindex = '-1'


let opacity = '1'


// 被拖拽的卡片


const cardsource = 


},// 卡片結束拖拽時觸發


enddrag(props) ,


}// 目標卡片


const cardtarget = 


if(dragindex - hoverindex === 1 && hoverclientx > hovermiddlex) 


props.movesort(dragindex, hoverindex)


monitor.getitem().index = hoverindex


},}class carditem extends react.component  = this.props


opacity = value === dragingindex  ? '0.1' : '1'


return (


connectdragsource(connectdroptarget(


)));


}}export default dragsource('card', cardsource, (connect, monitor) => ())(


droptarget('card', cardtarget, (connect, monitor) => ())(carditem),


)
// carditem.less


.carditem

實現Div拖拽

直觀的理解div拖拽 當滑鼠對著可拖拽部分按住後並拖動，div會跟著滑鼠一起運動，並且其運動空間限制在瀏覽器內部，當放開滑鼠時，則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...

vue 實現文字的拖拽 Vue中實現拖拽

實現思路 使用vue自定義指令directives，監聽滑鼠按下事件，計算按下時目標元素與父元素的距離，最後通過css position absolute left top實現距離改變 父元素需要有寬高，且有position定位 1 vue檔案中實現 使用directives template中使用...

基於Vue實現拖拽效果及阻止拖拽

使用方法 在需拖拽功能的元素上新增v drag啟用 補充 阻止拖拽 上述方法利用自定義指令實現了彈窗的拖拽，補充部分是阻止拖拽，例如 彈窗中有input框，如果想要選中input中的內容就需要阻止彈窗的拖拽 export default if left odivright var top e.cli...