基于Html5实现的react拖拽排序组件示例


Posted in HTML / CSS onAugust 13, 2018

拖拽排序组件Github地址:https://github.com/VicEcho/VDraggable.git

因为使用了react.js技术栈,所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。

由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop)。当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单。

实现的效果如下:

基于Html5实现的react拖拽排序组件示例

第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接为https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的click事件,在react.js里应使用onClick事件。

我的组件使用的拖放属性如下:

  • draggable 当设置为true时,当前控件可以拖拽
  • onDragStart 控件开始被拖拽时触发的事件,它提供一个dataTransfer.setData()方法,将必要的数据存储在对象中便于在其它方法中调用
  • onDragOver 规定当前控件可以接收拖拽的组件的方法,一般在此方法中阻止冒泡
  • onDragEnter 拖动后鼠标进入另一个可接受区域时触发,通过它可以实现移入效果
  • onDragLeave a拖到b,离开b的时候触发,可以用于监听消除移入效果的时机
  • onDrop 当控件被“释放”到一个有效的释放目标位置时触发,我在这个方法中处理数据,并通过它调用onChange方法,将value值暴露给父组件

其中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重新去渲染,以此控制顺序。

根据公司的要求,在此基础上,我还实现了拖拽复制的功能,这个等下次自己不懒的时候再记录下来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 #HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 #HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 #HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 #HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 #HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 #HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
You might like
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
几个判断型的面试题
2012/07/03 面试题
国际会议邀请函范文
2014/01/16 职场文书
请假条格式范文
2014/04/10 职场文书
小学教师个人总结
2015/02/05 职场文书
行政经理岗位职责
2015/04/15 职场文书
新年晚会开场白
2015/05/29 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL