移动端和pc端的拖拽排序插件 sortable.js

最新推荐文章于 2023-07-25 16:52:12 发布

柚稚zr

最新推荐文章于 2023-07-25 16:52:12 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： sortable 拖拽排序移动端

本文链接：https://blog.csdn.net/bulabulahei/article/details/114314109

版权

前端专栏收录该内容

46 篇文章 8 订阅

订阅专栏

项目上的需求，实现类似今日头条频道管理的功能，再网上搜的资料都是app实现的，找了半天才找到纯前端实现的插件sortable.js

优势

1、sortable.js支持移动端和pc端，
2、没有任何的依赖，其他的插件大都依赖JQuery，不是很好用
3、这个插件使用也非常简单

demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/sortable/sortable.min.js"></script>
    <style>
        #itxst {
            margin: 10px auto;
            width: 30%;
        }

            #itxst div {
                padding: 6px;
                width: 20%;
                background-color: palevioletred;
                border: solid 1px #eee;
                margin-bottom: 10px;
                cursor: move;
                color: azure;
            }
    </style>
</head>
<body>
        <div id="itxst" class="buttonshow">
			<div class="draggable-element"> 关注 </button></div>
            <div class="draggable-element"> 生产</button></div>
            <div class="draggable-element" >原煤</button></div>
            <div class="draggable-element" > 落实 </button></div>
            <div class="draggable-element"> 停产 </button></div>
            <div class="draggable-element" > 安全 </button></div>
        </div>
    <script>
        //获取对象
        var el = document.getElementById('itxst');
        //设置配置
        var ops = {
            animation: 1000,
            //拖动结束
            onEnd: function (evt) {
                console.log(evt);
                //获取拖动后的排序
                var arr = sortable.toArray();
                alert(JSON.stringify(arr));
            },
        };
        //初始化
        var sortable = Sortable.create(el, ops);
    </script>
</body>
</html>

实现效果

可以在配置里写回调函数，非常方便
在这里插入图片描述

结束！
在这里插入图片描述

柚稚zr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
移动端和pc端的拖拽排序插件 sortable.js

项目上的需求，实现类似今日头条频道管理的功能，再网上搜的资料都是app实现的，找了半天才找到纯前端实现的插件sortable.js优势1、sortable.js支持移动端和pc端，2、没有任何的依赖，其他的插件大都依赖JQuery，不是很好用3、这个插件使用也非常简单demo<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>sortable.js例
复制链接

扫一扫