React如何使用sortablejs实现拖拽排序
逆袭的菜鸟X 人气:0React使用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出的元素"; }, ... }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容