React如何使用sortablejs实现拖拽排序

 更新时间:2023年01月16日 14:23:48   作者:逆袭的菜鸟X  
这篇文章主要介绍了React如何使用sortablejs实现拖拽排序问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React使用sortablejs实现拖拽排序

1、使用npm装包

$ npm install sortablejs --save

2、引入Sortable

import Sortable from "sortablejs";

3、使用方法

<div className="grid-box" ref={this.sortableGroupDecorator}>
    {menus &&
        menus.map((item, i) => {
            return this.renderSelectedItemView(item, i);
        })}
</div>
sortableGroupDecorator = componentBackingInstance => {
    if (componentBackingInstance) {
        let options = {
            draggable: ".rows",
            // animation: "150",
            onEnd: evt => {
                let children = evt.to.children;
            }
        };
        Sortable.create(componentBackingInstance, options);
    }
};

sortablejs之强大的拖拽库

Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。

不依赖jQuery,支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

Sortable.js可以实现同组内上下拖动元素,也可以实现不同组内互相拖动元素。

安装

npm i sortablejs -S

基本示例

以下示例基于 Vue2:

<template>
  <div ref="box">
    <div data-id="a">a</div>
    <div data-id="b">b</div>
    <div data-id="c">c</div>
  </div>
</template>
 
<script>
import Sortable from 'sortablejs';
 
export default {
    mounted() {
      this.$nextTick(function() {
        this.initSortable();
      });
    },
    methods: {
      initSortable() {
        let sortable;
        // 拖动配置
        const ops = {
            animation: 200,
            group: "name",
            // 拖动结束
            onEnd: function (evt) {
                // 获取拖动后的排序,arr数组里的值是 data-id 的顺序
                let arr = sortable.toArray();
                console.log({evt, arr})
            },
        };
        //初始化
        sortable = Sortable.create(this.$refs.box, ops);
      }
    },
};
</script>

常用配置

const config = {
  //一个网页存在多个分组时设置,组名相同的组之间元素可以相互拖拽
  group: "name",
  //2种group写法选一种就可以了
  group: { 
    name: 'name',
    pull: 'clone', //克隆元素
  },
  //是否允许元素内部排序,如果为false当有多个排序组时,多个组之间可以拖拽,本身不能拖拽(默认true)
  sort: true,
  //是否禁用拖拽和排序
  disabled: false,
  //动画效果持续时间(不设置或0都没有过渡效果)
  animation: 150,
  //点击指定class类的元素才能拖拽(比如点击元素内的图标才能拖拽元素,可以给图标设置my-handle class)
  //class可以定义在元素本身上,也可以定义在子元素上
  handle: ".my-handle",
  // class为ignore的元素不能拖动
  filter: ".ignore",
  //含有item 类的元素可以被拖拽(class只能定义在元素本身上)
  draggable: ".item",
  //指定获取拖动后排序的属性
  dataIdAttr: 'data-id',
  //给停靠位置添加的class(可以给这个class定义样式)
  ghostClass: "ghost",
  //选中元素添加的类(包括悬浮的元素和停靠位置的元素)
  chosenClass: "chosen",
  //拖拽对象移动时添加的类
  dragClass: "drag",
  //禁用html5原生拖拽
  forceFallback: false,
  ...
 
  //克隆事件
  onClone: function (evt) {
      //被克隆的对象(被移到另外地方的那个元素)
      var origEl = evt.item;
      //克隆后的对象(还是在原来位置的元素)
      var cloneEl = evt.clone;
      cloneEl.innerHTML = "clone出的元素";
  },
  ...
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解react中的state的简写方式

    详解react中的state的简写方式

    React是一个状态机主要体现在state上,通过与用户交易实现不同的状态,state是组件的私有属性,是用来初始化的,本文重点给大家介绍react中的state的简写方式,感兴趣的朋友一起看看吧
    2021-08-08
  • 浅谈React Native Flexbox布局(小结)

    浅谈React Native Flexbox布局(小结)

    这篇文章主要介绍了浅谈React Native Flexbox布局(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react-routerV6版本和V5版本的详细对比

    react-routerV6版本和V5版本的详细对比

    React-Router5是React-Router6的前一个版本,它已经被React-Router6取代,React-Router 6是一次较大的重大更新,本文就来介绍一下react-routerV6版本和V5版本的详细对比,感兴趣的可以了解一下
    2023-12-12
  • react中的watch监视属性-useEffect介绍

    react中的watch监视属性-useEffect介绍

    这篇文章主要介绍了react中的watch监视属性-useEffect使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • React实现组件全屏化的操作方法

    React实现组件全屏化的操作方法

    开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便,下面看下我的处理方法,本文基于React+antd,给大家演示一个完整的全屏demo,感兴趣的朋友一起看看吧
    2021-10-10
  • react如何快速设置文件路径别名

    react如何快速设置文件路径别名

    React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目,这篇文章主要介绍了react如何快速设置文件路径别名,需要的朋友可以参考下
    2021-04-04
  • React 高阶组件与Render Props优缺点详解

    React 高阶组件与Render Props优缺点详解

    这篇文章主要weidajai 介绍了React 高阶组件与Render Props优缺点详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React JSX基础语法教程示例

    React JSX基础语法教程示例

    这篇文章主要为大家介绍了React JSX基础语法教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • React父子组件间的传值的方法

    React父子组件间的传值的方法

    在单页面里面,父子组件传值是比较常见的,这篇文章主要介绍了React父子组件间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JavaScript中rem布局在react中的应用

    JavaScript中rem布局在react中的应用

    这篇文章主要介绍了JavaScript中rem布局在react中的应用 的相关资料,需要的朋友可以参考下
    2015-12-12

最新评论