diff --git a/src/App.vue b/src/App.vue
index e37d9f8e98459bd165285f57b68cfcb1736b661d..1062c8c761e461f0429edb43a88c429138c85489 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div class="bgLight" @click="eventBus">
     <el-row>
       <el-col :span="24">
-        <div class="grid-content bg-purple-dark"><router-view /></div>
+        <div class="grid-content bg-purple-dark mainBox"><router-view /></div>
       </el-col>
     </el-row>
     <el-row>
@@ -42,10 +42,16 @@ export default {
   background-size: 100% 100%;
   background-position: center;
   text-align: center;
+  user-select: none;
 }
 .el-row {
   &:nth-of-type(1) {
     height: calc(100vh - 40px);
+    .mainBox{
+      height: calc(100vh - 40px);
+      overflow: hidden;
+      position: relative;
+    }
   }
   &:nth-of-type(2) {
     height: 40px;
diff --git a/src/directive/drag/index.js b/src/directive/drag/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..26d5cd07168c82b6da93b631ee2eb15873e9d080
--- /dev/null
+++ b/src/directive/drag/index.js
@@ -0,0 +1,41 @@
+const drag = {
+  mounted(e){
+		console.log(e.parentNode.parentNode);
+    let	minL = 0,
+			maxL = document.documentElement.clientWidth - e.offsetWidth,
+			minT = 0,
+			maxT = document.documentElement.clientHeight - e.offsetHeight;
+
+		e.addEventListener('mousedown', down);
+
+		// 鼠标按下
+		function down(ev) {
+      this.parentEvStartLeft = ev.target.parentNode.offsetLeft
+      this.parentEvStartTop = ev.target.parentNode.offsetTop
+			this.startX = ev.pageX;
+			this.startY = ev.pageY;
+			this._MOVE = move.bind(this);
+			this._UP = up.bind(this);
+			window.addEventListener('mousemove', this._MOVE);
+			window.addEventListener('mouseup', this._UP);
+		}
+
+		// 鼠标滑动
+		function move(ev) {
+			let curLeft = ev.pageX - this.startX + this.parentEvStartLeft,
+					curTop = ev.pageY - this.startY + this.parentEvStartTop;
+			curLeft = curLeft < minL ? minL : (curLeft > maxL ? maxL : curLeft);
+			curTop = curTop < minT ? minT : (curTop > maxT ? maxT : curTop);
+			this.parentNode.style.left = curLeft + 'px';
+			this.parentNode.style.top = curTop + 'px';
+		}
+
+		function up() {
+			// this => e
+			window.removeEventListener('mousemove', this._MOVE);
+			window.removeEventListener('mouseup', this._UP);
+		}
+  }
+}
+
+export default drag
\ No newline at end of file
diff --git a/src/directive/index.js b/src/directive/index.js
index 8d8061f74ebc69313c56515eb05bd52932e3728d..9c8a9f934fb459faa706a27c00f06513b6d1ff6c 100644
--- a/src/directive/index.js
+++ b/src/directive/index.js
@@ -1,6 +1,8 @@
 import ClickAnimation from './clickAnimation'
+import Dragg from './drag'
 const directivesList = {
-  ClickAnimation
+  ClickAnimation,
+  Dragg
 }
 
 const directives = {
diff --git a/src/store/index.js b/src/store/index.js
index 23cd1255818fa94d675085659f067b41cd4df929..d86f420ba0998723fac09be0630ed1ccb11c14b7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
 import { createStore } from 'vuex'
 import taskbar from './modules/taskbar'
+import desktop from './modules/desktop'
 
 export default createStore({
   state: {
@@ -17,6 +18,7 @@ export default createStore({
     }
   },
   modules: {
-    taskbar
+    taskbar,
+    desktop
   }
 })
diff --git a/src/store/modules/desktop.js b/src/store/modules/desktop.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ff86b398f8c377b0ef569377bad8a57580b770c
--- /dev/null
+++ b/src/store/modules/desktop.js
@@ -0,0 +1,19 @@
+const state = {
+  zIndex: 1
+}
+const mutations={
+  ZINDEX(state){
+    state.zIndex++
+  }
+}
+const actions={
+  changeZIndex({commit}){
+    commit('ZINDEX')
+  }
+}
+export default{
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
\ No newline at end of file
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 16cb7408e351a594a109e003d966f113ea1319d7..05d1b1753fda1497605bd28abdfb404385305e32 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -8,6 +8,10 @@
   <el-drawer :modal-class="drawerData.className" v-model="drawer" :before-close='drawBeforeClose' :modal='drawerData.modal' :with-header="drawerData.withHeader" :direction="drawerData.position" :title="drawerData.title">
     <component :is='drawerData.componentTag'></component>
   </el-drawer>
+  <div class="test">
+      <div class="draggBox" v-Dragg></div>
+      <div class="box2"></div>
+    </div>
 </template>
 
 <script>
@@ -169,4 +173,19 @@ export default {
     background: rgba(255, 255, 255, 0.5);
   }
 }
+.test{
+  position: absolute;
+  width: 500px;
+  height: 300px;
+  top: 35%;
+  left: 35%;
+  display: grid;
+  grid-template-rows: 3fr 7fr;
+  .draggBox{
+    background-color: pink;
+  }
+  .box2{
+    background-color: cyan;
+  }
+}
 </style>
\ No newline at end of file