react拖动排序组件

react 拖动排序组件

先看效果图

使用

引入moveSort组件传入headerList（表头），list（数据源）拖动后的回调move

原理 用了H5的drag API

给元素绑定拖拽事件,draggable=true

记录拖拽元素，通过dragStart获得通过dragOver 获得拖拽经过的元素，比较两者的权重weight，判断拖拽方向

const dgIndex = JSON.parse(this.dragged.dataset.item).weight; //拖拽元素 const taIndex = JSON.parse(e.target.dataset.item).weight; //经过元素 const animateName = dgIndex > taIndex ? "drag-up" : "drag-down"; //判断

dragEnd重新排序

list = list.map((doc, index)=> { console.log(doc) doc.weight = len - index; return doc; })

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。