支持触屏设备和大部分浏览器的超级好用的拖拽排序插件sortable二(配置属性详细讲解)

Sortable是一款支持触屏设备和多浏览器的拖拽排序插件,适用于vue等框架。它提供了丰富的配置选项如`group`、`sort`、`delay`,并有友好的滚动效果和动画。插件基于HTML5拖放API,不依赖jQuery,支持多种事件回调如`onStart`、`onEnd`,并提供序列化、排序等方法。
摘要由CSDN通过智能技术生成

这篇接连着上篇,这篇主要讲解属性和配置项

下载地址: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: "
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值