亲宝软件园·资讯

展开

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

逆袭的菜鸟X 人气:0

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出的元素";
  },
  ...
}

总结

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

加载全部内容

相关教程
猜你喜欢
用户评论