react dnd實現卡片拖拽排序

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

具體用到了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...