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>
結果：
