拖拽排序组件Github地址:https://github.com/VicEcho/VDraggable.git
因为使用了react.js技术栈,所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。
由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop)。当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单。
实现的效果如下:
第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接为https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的click事件,在react.js里应使用onClick事件。
我的组件使用的拖放属性如下:
其中draggable,onDragStart是被“拖拽”方需要设置的属性,onDragOver,onDragEnter,onDragLeave和onDrop是被“拖入”方需要设置的属性。不过对于我的拖拽排序组件,每一个元素都是拖拽和拖入方
第二步,既然“她"是react.js的组件, 按照习惯,简单的将输入属性定为为value,同时,暴露onChange事件监听value的变化,并将其暴露给父组件,同时,暴露一个属性sortKey告诉组件使用哪个key作为排序字段。
既然涉及到排序,同时允许指定组件每个元素的内部子组件,我将输入数据格式定义为一个数组对象,其中content可以为reactNode:
value: [ { content: 'div1', code: '01', sort: 0, }, { content: 'div2', code: '02', sort: 1 }, { content: 'div3', code: '03', sort: 2 }, { content: 'div5', code: '05', sort: 5 }, { content: 'div4', code: '04', sort: 4 }]
根据value我去生成可排序组件的每个node,关键代码如下:
// 生成拖拽组件 createDraggleComponent(data, sortKey, style, uId) { return data.sort(this.compare(sortKey)).map((item) => { return ( <div className={styles.content} key={item.code} draggable={true} onDragEnter={this.dragenter.bind(this)} onDragLeave={this.dragleave.bind(this)} onDragStart={this.domdrugstart.bind(this, item[sortKey], item.code, uId, item)} onDrop={this.drop.bind(this, item[sortKey], data, sortKey, uId)} onDragOver={this.allowDrop.bind(this)} style={{ ...style }}>{item.content}</div> ) }) } render() { const { value, sortKey, style } = this.props; return ( <Row> <div style={{ display: 'flex', flexDirection: 'row' }}> {this.createDraggleComponent(value, sortKey, style)} </div> </Row> ) }
其中的属性方法具体实现:
// 拖动事件 domdrugstart(sort, code, ee) { ee.dataTransfer.setData("code", code); ee.dataTransfer.setData("sort", sort); } // 拖动后鼠标进入另一个可接受区域 dragenter(ee) { ee.target.style.border = '2px dashed #008dff'; ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)'; } // a拖到b,离开b的时候触发 dragleave(ee) { ee.target.style.border = '1px solid grey'; ee.target.style.boxShadow = ''; } // 对象排序 compare(key) { return (obj1, obj2) => { if (obj1[key] < obj2[key]) { return -1; } else if (obj1[key] > obj2[key]) { return 1; } return 0 } } // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时 drop(dropedSort, data, sortKey, ee) { ee.preventDefault(); const code = ee.dataTransfer.getData("code"); const sort = ee.dataTransfer.getData("sort"); if (sort < dropedSort) { data.map(item => { if (item.code === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) { item[sortKey]--; } return item; }); } else { data.map(item => { if (item.code === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) { item[sortKey]++; } return item; }); } this.props.onChange(data) } allowDrop(ee) { ee.preventDefault(); }
值得注意的点其实只有一个,我控制顺序的时候,并没有使用.target.before(document.getElementById({id}))去实际操控节点,而是在每次触发onDrop时间的时候,处理数据的sort,并通过onChange事件暴露给父组件,将数据输出,通过改变value值触发虚拟dom重新去渲染,以此控制顺序。
根据公司的要求,在此基础上,我还实现了拖拽复制的功能,这个等下次自己不懒的时候再记录下来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务...
DreamWeaver中输入的文字,想要换换,我们可以使用p段落标签,也可以使用br换行...
为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。...
随着 微信小程序 的运用,很多企业和个人看见了 小程序 的商机,想通过微信小程...
本文首发公众号「 前端从进阶到入院 」,欢迎关注! 最近看到阿里前端技术专家狼...
序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {...
版本信息 echarts:5.1.2 uniapp:3.1.8 原因: echarts 引入的时候,会优先判断当...
免实名 域名 有哪些资料?事实上,只要是在国内注册的域名,均需要实名的,不存...
2020年3月18日,中国信息通信研究院(以下简称“中国信通院”)与GSMA通过网络视...
一. 问题描述 使用如下命令推送代码到 github : git push origin main 根据提示...