使用h5实现react拖拽排序组件的方法（附代码）(2)-木庄网络博客

当前第2页返回上一页

第二步，既然“她"是react.js的组件, 按照习惯，简单的将输入属性定为为value，同时，暴露onChange事件监听value的变化，并将其暴露给父组件，同时，暴露一个属性sortKey告诉组件使用哪个key作为排序字段。
既然涉及到排序，同时允许指定组件每个元素的内部子组件，我将输入数据格式定义为一个数组对象，其中content可以为reactNode：

value: [
               {
                   content: 'p1',
                   code: '01',
                   sort: 0,
               },
               {
                   content: 'p2',
                   code: '02',
                   sort: 1
               },
               {
                   content: 'p3',
                   code: '03',
                   sort: 2
               },
               {
                   content: 'p5',
                   code: '05',
                   sort: 5
               },
               {
                   content: 'p4',
                   code: '04',
                   sort: 4
               }]

根据value我去生成可排序组件的每个node，关键代码如下：

// 生成拖拽组件
createDraggleComponent(data, sortKey, style, uId) {
    return data.sort(this.compare(sortKey)).map((item) => {
        return (
            <p
                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}</p>
        )
    })
}
render() {
    const { value, sortKey, style } = this.props;
    return (
        <Row>
            <p style={{ display: 'flex', flexDirection: 'row' }}>
                {this.createDraggleComponent(value, sortKey, style)}
            </p>
        </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重新去渲染，以此控制顺序。

根据公司的要求，在此基础上，我还实现了拖拽复制的功能。