React如何使用sortablejs实现拖拽排序
作者：逆袭的菜鸟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出的元素";
},
...
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。