拖动(拖拽)功能 vuedraggable or react-sortable-hoc

1.vue 拖动功能插件 vuedraggable 

 官方网站

vue.draggable中文文档    (这里有完整的例子和属性说明)

vuedraggable npm 详细使用地址

安装：

yarn add vuedraggable
 
npm i -S vuedraggable

使用（一个例子）：

<template>
     <draggable 
          v-model="listdata"//绑定的数据数组,拖动之后数据会自动更新
          animation="1000"//拖动的动画效果过渡时间
          draggable="li"//哪些元素是可以被拖动的
          :disabled="true"//是否启用拖拽组件 ，不写默认拖动
          class="draggable_ul"//类名
        >
          <li
            v-for="(item,index) in listdata"
            :key="(item || {}).id"
            class="draggable_li"         
          >
            <span>{{index}}. </span>
            <span>
              {{ (item || {}).name }}
            </span> 
          </li> 
        </draggable> 
</template> 

<script>
import draggable from 'vuedraggable'

export default {
    components: {
        draggable, 
      },
    data(){
        return {
            listdata:[
                {id:'1001',name:'item1'},
                {id:'1002',name:'item2'},
                {id:'1003',name:'item3'},
                {id:'1004',name:'item4'},
            ]
        }
    }
}

</script>

2.react 拖动功能插件 react-sortable-hoc

官方网站

react-sortable-hoc npm 详细地址 

array-move npm

安装：

npm install react-sortable-hoc --save

//array-move 安装（配合使用）（用来排序，不建议用yarn，会报错，如果非得用那就得百度查查了）
npm install array-move

附上一段官网使用：

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import {arrayMoveImmutable} from 'array-move';

const SortableItem = SortableElement(({value}) => <li>{value}</li>);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMoveImmutable(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent />, document.getElementById('root'));

Hooks使用：

import React, { useState } from 'react'
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';


function Index(){
    cosnt [data,setData]=useState([
            {id:'1001',name:'item1'},
            {id:'1002',name:'item2'},
            {id:'1003',name:'item3'},
    ])

    function onDepSortEnd ({ oldIndex, newIndex }) { 
        setData(arrayMoveImmutable(data, oldIndex, newIndex))
    } 

    const SortableItem = SortableElement(({ ind, item }) => (
        <li 
            className="li-item" 
            key={ind} 
            style={{ zIndex: 99999999 }} //防止拖动时，拖动的目标消失
            >
            
               {ind * 1 + 1}. {item.name}
        </li>
    ));

    const SortableList = SortableContainer(({ items }) => {
        return (
            <ul 
                className="ul-box"
               >
                {items.map((item, index) => (
                    <SortableItem key={item.id} index={index} ind={index} item={item}            />
                ))}
            </ul>
        );
    });

    return (
        <SortableList 
            helperClass="row-dragging-item" //可以添加一些样式，当然也可以直接设置里面的标签
            distance={5} //拖动了一定数量的像素后才排序，主要防止其上的点击事件和拖动事件同时触发
            axis="x" //项目可以水平、垂直或在网格中排序。 取值范围:x、y或xy  
            items={data} //数据，一般是数组
            onSortEnd={onDepSortEnd} 
            />
    )
}


export default Index;

以上就是两种插件的简单使用，具体的属性可点击官方连接查看使用。