Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery，支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
Sortable.js可以实现同组内上下拖动元素，也可以实现不同组内互相拖动元素。
一、安装
npm i sortablejs -S二、基本示例
以下示例基于 Vue2：
a
b
c
三、常用配置
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出的元素";
},
...
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/223190.html原文链接：https://javaforall.net
