这篇接连着上篇,这篇主要讲解属性和配置项
下载地址:https://github.com/RubaXa/Sor...
官方DEMO:http://rubaxa.github.io/Sorta...
该插件在vue项目里的用法:https://blog.csdn.net/zmm13298329239/article/details/83021603
特点
-
支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得)
-
可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序
-
移动列表单元时有css动画
-
支持拖放操作和可选择的文本(这句我也没理解,大概意思就是对原生的拖放进行拓展了)
-
非常友善的滚动效果
-
基于原生HTML5中的拖放API
-
支持多种框架(angular、vue、react等)
-
支持所有的css框架,像Bootstrap
-
简单的API,方便使用
-
CDN
-
不依赖jQuery
使用方法:
<script src="../js/sortable.min.js?v=0.0"></script>
var el = document.getElementById('items');
new Sortable(el);
// 常用
new Sortable(el, {
handle: ".my-menus", // 拖拽区域,默认为 items 的 子元素
onStart: function (evt) { // 拖拽开始
var itemEl = evt.item;// 当前拖拽的html元素
},
onEnd: function (evt) { // 拖拽结束
var itemEl = evt.item;
}
});
如果是2组之间拖放:
new Sortable(document.getElementById('myMenus1'), {
group: ".moveCur",
handle: ".moveCur"
});
new Sortable(document.getElementById('myMenus2'), {
group: "