@yangchanghao/react-draggable-next

基于sortableJS开发的轻量级react拖拽插件,仓库地址 查看

首先感谢 sortableJS , github

安装

npm install @yangchanghao/react-draggable-next

或

yarn add @yangchanghao/react-draggable-next

快速使用

1. 声明文件

src下新建declare.d.ts

declare module '@yangchanghao/react-draggable-next';

2. 单个列表内部拖拽

import React, { FunctionComponent, useState } from 'react';
import Styles from './index.less';
import ReactDraggable from '@yangchanghao/react-draggable-next';

const App: FunctionComponent<any> = ()=>{

    const DemoBlock = ({ text }: { text: string }) => {
        return (
            <div style={{ width: '100px', height: '100px', background: '#FFFFFF', margin: '5px' }}>
                <div className={`move ${text === '英语' ? 'filter' : ''}`} style={{ width: '20px', height: '20px', background: '#f60', cursor: 'move' }}></div>
                {text}
            </div>
        )
    }

    return (
        <div clasName={Styles.pageWrapper}>
         <ReactDraggable
              className={Styles.draggable_container} // 容器样式
              style={{backgroundColor:'#FFFFFF'}} // 容器内置样式
              animation={1000} // 动画，如果不设置animation属性拖拽时的过渡效果会非常生硬。
              sort // 是否允许组内排序
              handle='.move' // 指定拖拽句柄才能拖动父元素
              group={{ name: 'drag-group', put: true, pull: true }} // 或者直接是一个字符串 "drag-group"
              ghostClass='moveing' // 自定义停靠位置样式
              dragClass='draging' // 拖拽对象移动样式
              filter=".filter" // 过滤或忽略指定元素
              list={list} // 列表元素
              setList={setList} // 设置列表元素
              onDragStart={() => console.log('拖拽开始')}  // 拖拽开始时触发的事件
              onDragMove={() => console.log('拖拽进行中')} // 拖拽进行中时触发的事件
              onDragEnd={() => console.log('拖拽结束')} // 拖拽结束时触发的事件
              onAdd={()=>console.log('列表添加了元素')} // 列表增加元素时触发的事件
              onRemove={()=>console.log('列表删除了元素')} // 列表删除元素时触发的事件
          >
           {
             list.map(item => (
              <DemoBlock key={item.id} text={item.title}></DemoBlock>
              ))
           }
         </ReactDraggable>
        </div>
    )
}

export default App

3. 列表之前互相拖拽

其实就是组件group属性设置成相同的值，或者group对象内部的name设置为相同的值

import React, { FunctionComponent, useState } from 'react';
import Styles from './index.less';
import ReactDraggable from '@yangchanghao/react-draggable-next';


export interface IListItem {
    id: number;
    title: string;
}


const Draggable: FunctionComponent<any> = () => {

    const [list, setList] = useState<Array<IListItem>>([{ id: 1, title: "语文" }, { id: 2, title: '数学' }, { id: 3, title: '英语' }])
    const [list2, setList2] = useState<Array<IListItem>>([{ id: 4, title: "物理" }, { id: 5, title: '化学' }, { id: 6, title: '生物' }])

    const DemoBlock = ({ text }: { text: string }) => {
        return (
            <div style={{ width: '100px', height: '100px', background: '#FFFFFF', margin: '5px' }}>
                <div className={`move ${text === '英语' ? 'filter' : ''}`} style={{ width: '20px', height: '20px', background: '#f60', cursor: 'move' }}></div>
                {text}
            </div>
        )
    }

    return (
        <div>
            <div className={Styles.wrapper}>
                <ReactDraggable
                    className={Styles.draggable_container}
                    animation={1000}
                    sort
                    handle='.move'
                    group={{ name: 'drag-group', put: true, pull: true }}
                    ghostClass='moveing'
                    dragClass='draging'
                    filter=".filter"
                    list={list}
                    setList={setList}
                    onDragStart={() => console.log('拖拽开始')}
                    onDragMove={() => console.log('拖拽进行中')}
                    onDragEnd={() => console.log('拖拽结束')}
                >
                    {
                        list.map(item => (
                            <DemoBlock key={item.id} text={item.title}></DemoBlock>
                        ))
                    }
                </ReactDraggable>
            </div>
            <div className={Styles.wrapper} style={{ backgroundColor: '#eee' }}>
                <ReactDraggable
                    className={Styles.draggable_container}
                    animation={1000}
                    sort
                    handle='.move'
                    group={{ name: 'drag-group', put: true, pull: true }}
                    ghostClass='moveing1'
                    dragClass='draging'
                    filter=".filter"
                    list={list2}
                    setList={setList2}
                >
                    {
                        list2.map(item => (
                            <DemoBlock key={item.id} text={item.title}></DemoBlock>
                        ))
                    }
                </ReactDraggable>
            </div>
        </div>
    )
}

export default Draggable

更多属性列表请参考

sortableJs配置文档 或 sortableJs中文配置文档