博客

// 插件
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

onSortEnd = ({oldIndex, newIndex}) => {
    const {conditionList} = this.state;
    const newList = arrayMove(conditionList, oldIndex, newIndex);
    this.setState({conditionList: newList}, async () => {
       
    });
};

render () {
    const SortableContainer = sortableContainer(({children}) => {
            return (
                <ul className={style.sortBox}>
                    {children}
                    <div onClick={this.handleAddLabel} className={style.add}>
                        + 添加标签
                    </div>
                </ul>
            );
        });
        const SortableItem = sortableElement(item => (
            <div className={style.sort_wrapper} style={{position: 'relative', zIndex: 9999, display: 'flex', alignItems: 'center', marginBottom: 16}}>
                <div
                    className={style.sortRow}
                    style={{background: '#F5F6FA', padding: '0 18px', width: 375, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'flex-start', marginRight: 18, fontSize: 14}}>
                    <span style={{marginRight: 10}}>
                        <UnorderedListOutlined />
                    </span>
                    <span
                        style={{
                            color: '#222222',
                            display: 'inline-block',
                            width: 314,
                            fontWeight: 400,
                            fontSize: 14,
                            wordBreak: 'break-all',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}>
                        {item.value.fieldName}
                    </span>
                </div>
                <img src={classifyDeleteIcon} className={style.delete} onClick={e => this.handleDelete(item)} style={{display: 'none'}} />
            </div>
        ));

    return (
        <SortableContainer onSortEnd={this.onSortEnd2} distance={10}>
            {[].map((value, index) => {
                 return <SortableItem key={`item-${index}`} index={index} value={value} />;
            })}
        </SortableContainer>
    )
}

// CSS
.sort_wrapper {
            .sortRow {
                position: relative;
                z-index: 9999;
                border-radius: 4px;
                color: rgba(0, 0, 0, 0.85);
                cursor: pointer;
                user-select: none;
            }
   
            .delete {
                display: inline-block !important;
                cursor: pointer;
            }
        }

        .sort_wrapper:last-child {
            margin-bottom: 12px;
        }

.sortBox {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    margin-bottom: 0;
}

// 原生写法
<div className={style.dragger}>
    {this.state.draggerList.map((item, index) => {
        return (
            <span
                className={style.dragger_list}
                key={index}
                draggable={true}
                onDrop={e => this.drop(e, index)}
                onDragStart={e => this.dragStart(e, index)}
                onDragOver={e => this.dragOver(e, index)}
                onDragEnd={e => this.dragEnd(e, index)}>
                <img src={commonSortIcon} />
                <span>{item.name}</span>
            </span>
        );
    })}
</div>

overIndex = null;
    startIndex = null;

    async componentDidMount() {}

    // 拖拽开始
    dragStart = (e, index) => {
        this.startIndex = index;
    };

    // 拖拽元素经过放置元素时
    dragOver = (e, index) => {
        e.preventDefault(); // 此处的代码是必须的  不然无法拖拽
        this.overIndex = index;
    };

    // 拖动结束
    dragEnd = e => {
        e.preventDefault();
        this.overIndex = null;
    };

    // 拖拽元素放到放置元素时
    drop = (e, index) => {
        e.preventDefault();
        this.handleDragEnd(index);
        this.overIndex = null;
    };

    handleDragEnd = async index => {
        const draggerList = this.swapArr(this.state.draggerList, this.startIndex, index);
        this.setState({draggerList});
    };

    swapArr(arr, index1, index2) {
        if (index1 > index2) {
            arr.splice(index2, 0, arr[index1]);
            arr.splice(index1 + 1, 1);
        } else {
            arr.splice(index2 + 1, 0, arr[index1]);
            arr.splice(index1, 1);
        }
        return arr;
    }