diff --git a/package.json b/package.json
index a4d09dd..9610ef2 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "vue": "^2.6.11",
     "vue-infinite-loading": "^2.4.5",
     "vue-waterfall-plugin": "^1.0.7",
+    "vuedraggable": "^2.24.1",
     "vuex": "^3.4.0",
     "xgplayer": "^2.9.10",
     "xgplayer-hls.js": "^2.2.3"
diff --git a/src/components/Star.vue b/src/components/Star.vue
index 7c92806..f063e00 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -21,20 +21,24 @@
                 <span class="btn"></span>
               </span>
             </li>
-            <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)" :class="[i.hasUpdate ? 'zy-highlighted': '']">
-              <span class="name">{{i.name}}</span>
-              <span class="type">{{i.type}}</span>
-              <span class="time">{{i.year}}</span>
-              <span class="site">{{getSiteName(i.key)}}</span>
-              <span class="note">{{i.note}}</span>
-              <span class="operate">
-                <span class="btn" @click.stop="playEvent(i)">播放</span>
-                <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                <span class="btn" @click.stop="updateEvent(i)">同步</span>
-                <span class="btn" @click.stop="downloadEvent(i)">下载</span>
-                <span class="btn" @click.stop="deleteEvent(i)">删除</span>
-              </span>
-            </li>
+            <draggable v-model="list" @change="listUpdatedEvent">
+              <transition-group>
+                <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)" :class="[i.hasUpdate ? 'zy-highlighted': '']">
+                  <span class="name">{{i.name}}</span>
+                  <span class="type">{{i.type}}</span>
+                  <span class="time">{{i.year}}</span>
+                  <span class="site">{{getSiteName(i.key)}}</span>
+                  <span class="note">{{i.note}}</span>
+                  <span class="operate">
+                    <span class="btn" @click.stop="playEvent(i)">播放</span>
+                     <span class="btn" @click.stop="shareEvent(i)">分享</span>
+                    <span class="btn" @click.stop="updateEvent(i)">同步</span>
+                    <span class="btn" @click.stop="downloadEvent(i)">下载</span>
+                    <span class="btn" @click.stop="deleteEvent(i)">删除</span>
+                  </span>
+                </li>
+              </transition-group>
+            </draggable>
           </ul>
         </div>
       </div>
@@ -45,6 +49,8 @@
 import { mapMutations } from 'vuex'
 import { star, history, sites } from '../lib/dexie'
 import zy from '../lib/site/tools'
+import draggable from 'vuedraggable'
+
 const { clipboard } = require('electron')
 export default {
   name: 'star',
@@ -54,6 +60,9 @@ export default {
       sites: []
     }
   },
+  components: {
+    draggable
+  },
   computed: {
     view: {
       get () {
@@ -87,6 +96,19 @@ export default {
         this.SET_SHARE(val)
       }
     }
+    // draggableList: {
+    //   get () {
+    //     return this.list
+    //   },
+    //   set (value) {
+    //     star.clear().then(res1 => {
+    //       star.bulkAdd(value).then(res2 => {
+    //         this.$message.success('排序成功')
+    //         this.list = value
+    //       })
+    //     })
+    //   }
+    // }
   },
   watch: {
     view () {
@@ -146,6 +168,17 @@ export default {
         this.getStarList()
       })
     },
+    listUpdatedEvent () {
+      star.clear().then(res1 => {
+        // 重新排序
+        var id = this.list.length
+        this.list.forEach(element => {
+          element.id = id
+          star.add(element)
+          id -= 1
+        })
+      })
+    },
     updateEvent (e) {
       zy.detail(e.key, e.ids).then(res => {
         var doc = {
@@ -243,6 +276,7 @@ export default {
   },
   created () {
     this.getStarList()
+    window.Sortable = require('sortablejs').Sortable
   }
 }
 </script>