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

第

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

目录React使用sortablejs实现拖拽排序sortablejs之强大的拖拽库安装基本示例常用配置总结

React使用sortablejs实现拖拽排序

1、使用npm装包

$npminstallsortablejs--save

2、引入Sortable

importSortablefromsortablejs;

3、使用方法

divclassName=grid-boxref={this.sortableGroupDecorator}

{menus

menus.map((item,i)={

returnthis.renderSelectedItemView(item,i);

/div

sortableGroupDecorator=componentBackingInstance={

if(componentBackingInstance){

letoptions={

draggable:.rows,

//animation:150,

onEnd:evt={

letchildren=evt.to.children;

Sortable.create(componentBackingInstance,options);

sortablejs之强大的拖拽库

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

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

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

安装

npmisortablejs-S

基本示例

以下示例基于Vue2：

template

divref=box

divdata-id=aa/div

divdata-id=bb/div

divdata-id=cc/div

/div

/template

script

importSortablefromsortablejs;

exportdefault{

mounted(){

this.$nextTick(function(){

this.initSortable();

methods:{

initSortable(){

letsortable;

//拖动配置

constops={

animation:200,

group:name,

//拖动结束

onEnd:function(evt){

//获取拖动后的排序，arr数组里的值是data-id的顺序

letarr=sortable.toArray();

console.log({evt,arr})

//初始化

sortable=Sortable.create(this.$refs.box,ops);

/script

常用配置

constconfig={

//一个网页存在多个分组时设置，组名相同的组之间元素可以相互拖拽

group:name,

//2种group写法选一种就可以了

group:{

name:name,

pull:clone,//克隆元素

//是否允许元素内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽（默认true）

sort:true,

//是否禁用拖拽和排序

disabled:false,

//动画效果持续时间（不设置或0都没有过渡效果）

animation:150,

//点击指定class类的元素才能拖拽（比如点击元素内的图标才能拖拽元素，可以给图标设置my-handleclass）

//class可以定义在元素本身上，也可以定义在子元素上

handle:.my-handle,

//class为ignore的元素不能拖动

filter:.ignore,

//含有item类的元素可以被拖拽（cl