ortable 是一个JavaScript库，用于在现代浏览器和触摸设备上重新排序拖放列表。不需要jQuery。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS库, 例如 Bootstrap.
中文文档：http://www.sortablejs.com/
安装方式：npm安装、bower安装、script引入都可，本文采用script方式引入
线上demo：https://my.weblf.cn/alone_page/pages/sorttablejs.html
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,target-densitydpi=400"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>拖放排序插件Sortable.js</title> <link rel="stylesheet" href="../statics/css/reset.css" id='reset'> <script type="text/javascript" src="../statics/js/public.js?ver=2" id='public'></script> <script type="text/javascript" src="../statics/js/vue2.6.11.js"></script> <script type="text/javascript" src="../statics/js/Sortable.min.js"></script> </head> <body> <div id="app" v-cloak :style="{'padding-top':isWeiXin?'0rem':'3rem'}"> <!-- 头部 --> <div class="now_page_head" ref="now_page_head" v-if="!isWeiXin"> 拖放排序插件Sortable.js <img src="../statics/images/back.png" class="back" /> </div> <!-- 页面的主要内容 --> <section class="content"> <div class="list" ref="list"> <div class="oli" v-for="(item,index) in items" :key=index> <p class="name">{{item.nm}}</p> </div> </div> <div class="otitle">当前排序：</div> <span class="oli" v-for="(item,index) in items" :key=index> {{item.nm}}、 </span> </section> <!-- 页面结束 --> </div> </body> <script> var vm = new Vue({ el: '#app', data: { showSpinner: false, isWeiXin: window.TS_WEB.isWeiXin, items: [{ id: 1, nm: '日元0' }, { id: 2, nm: '日元1' }, { id: 3, nm: '日元2' }, { id: 4, nm: '日元3' }] }, components: {}, computed: {}, methods: { }, created() { }, mounted() { var _this = this; var $ul = this.$refs.list new Sortable($ul, { onUpdate: function (event) { //修改items数据顺序 var newIndex = event.newIndex, oldIndex = event.oldIndex, $li = $ul.children[newIndex], $oldLi = $ul.children[oldIndex]; // 先删除移动的节点 $ul.removeChild($li) // 再插入移动的节点到原有节点，还原了移动的操作 if (newIndex > oldIndex) { $ul.insertBefore($li, $oldLi) } else { $ul.insertBefore($li, $oldLi.nextSibling) } // 更新items数组 var item = _this.items.splice(oldIndex, 1) _this.items.splice(newIndex, 0, item[0]) // 下一个tick就会走patch更新 }, animation: 150, }) }, }) </script> <style> .now_page_head { position: fixed; top: 0; left: 0; width: 100%; height: 3rem; text-align: center; font-size: 1.27rem; line-height: 3rem; z-index: 11; transition: all 0.5s ease; background: #fff; } .back { height: 1rem; position: absolute; left: 1rem; top: 1rem; } .seting { height: 1.2rem; position: absolute; right: 1rem; top: 0.9rem; } .share { position: absolute; right: 1rem; top: 0rem; line-height: 3rem; font-size: 1rem; } .list .oli { padding: 15px 0; border: 1px solid #ccc; } .otitle { margin-top: 20px; font-weight: bold; } </style> </html>
结果：
