react拖拽效果实现

本文是向大家介绍react中拖拽组件的使用，它能够简洁的实现页面元素的拖拽排序和拖拽复制等功能，能够带来更好的用户体验。

---

原生js中，我们可以通过onDrag和onDrop事件来实现拖拽效果。而在react中，有一个强大的库，react-dnd，对拖拽相关能力进行了封装。react-dnd强大的好处是高度自由性，但是各种代码需要去手动实现。

我们项目中的装修页面需要实现一个拖拽（排序和复制），这里我们选择一个基于react-dnd二次封装的库，react-smooth-dnd。

文档

安装

npm i react-smooth-dnd

示例

import React, { Component } from 'react';
import { Container, Draggable } from 'react-smooth-dnd';

class SimpleSortableList extends Component {
  render() {
    return (
      

        
          {this.props.items.map(item => {
            return (
              
                {this.props.renderItem(item)}
              
            );
          })}
        
      
    );
  }
}

API

组件包括Container和Draggable两个。其中Draggable是被拖拽的元素，Container是这些元素的父容器。试验了一下，Draggable必须是Container的子元素。Draggable没有什么属性，相关的属性和方法都在container上设置。

常用的有这些：

• behaviour，设置这个容器是接收draggable的move，还是接收其他容器draggable的copy行为。默认move。
• orientation，