React通过原生鼠标事件实现拖拽(drag and drop)列表重排序

最新推荐文章于 2025-03-12 09:27:08 发布

Cassy_Wu

最新推荐文章于 2025-03-12 09:27:08 发布

阅读量3.1k

点赞数 1

分类专栏： React 文章标签： javascript js css reactjs react

本文链接：https://blog.youkuaiyun.com/Cassy_Wu/article/details/106956910

版权

本文介绍了如何在React中利用原生鼠标事件实现列表的拖拽重排序。通过模拟数据、渲染、样式设置、添加鼠标事件以及处理数组变动，详细讲解了拖拽效果的实现过程。同时，文章还提到了如何将此功能适配到手机端，通过替换触摸事件并处理一些细节问题，确保在iOS设备上正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然现在html5已经有支持拖拽的事件，但是支持还不那么全面。所以目前大部分的拖拽还是通过原生的鼠标事件来实现列表重新排序。话不多说。一步步开始做吧。下标index: x是为了方便理解添加的。

item拖动效果

Step1.准备一个模拟数据

let list = [];

for(let i = 0; i< 10; i++){
   
    list.push(`item ${
     i}`);
}

Step2.渲染到页面上

export default class DragAndDrop extends Component {
   
    constructor() {
   
        super();
        this.state = {
   
            lists: list
        }
    }

    render(){
   
        return(
            <div className='listContainer'>
                {
   this.state.lists.map((item, index) => (
                    <li key={
   item}>{
   item} <span>index: {
   index}</span></li>
                ))}
            </div>
        )
    }
}

Step3.写样式

.listContainer {
   
    position: relative;
    width: 350px;
    margin: 10px 0 0 40px;
    background-color: #eee; /*跟item移动时候的背景颜色一样，就可以产生一种移开后还留有阴影的错觉*/
}

.listContainer li {
   
    list-style: none;
    border-bottom: 1px solid #9c9c9c;
    padding: 10px;
    background-color: #fff;
}

.listContainer li span{
   
    font-size: 10px;
}

.listContainer .coverMask {
   
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

Step4.添加mouseDown事件，添加一个遮盖层，绑定mouseMove, mouseUp事件

constructor() {
   
   super();
   this.state = {
   
       lists: list,
       dragging: false,
       draggingItemIndex: -1,
       startPageY: 0,
       offsetY: 0
   }
}

handleMouseDown = (event, index) => {
   
   this.setState({
   
       dragging: true,
       draggingItemIndex: index,
       startPageY: event.pageY
   })
}

handleMouseUp = (event) => {
   
   this.setState({
   
       dragging: false,
       draggingItemIndex: -1