111

111

src/views/teacherManager/teacherDetail/components/weeklyCalendar.vue

@@ -21,7 +21,9 @@
         </div>
       </div>
       <div class="timer">
-        <div class="imgWrap">
+        <div class="imgWrap"
+             v-drag
+             draggable="true">
           <img :src="timerImg">
           <div v-for="(item,index) in newList"
                :key="index+'new'">
@@ -100,6 +102,9 @@ export default {
   methods: {
     setStartTimeAndEndTime (date) {
       this.startTime = getNowDateAndMonday(setDate(date))
+      this.tableTime = this.startTime;
+      this.active = 0;
+      console.log(this.active)
       this.endTime = getNowDateAndSunday(setDate(date))
     },
     getCalendatList () {
@@ -168,6 +173,46 @@ export default {
       this.week = val;
       this.getCalendatList()
       this.setWeekList()
+    },
+    scrollImg (e) {
+      console.log(e)
+    }
+  },
+  directives: {
+    drag (el) {
+      let oDiv = el; //当前元素
+      let self = this; //上下文
+      //禁止选择网页上的文字
+      document.onselectstart = function () {
+        return false;
+      };
+      oDiv.onmousedown = function (e) {
+        //鼠标按下，计算当前元素距离可视区的距离
+        let disX = e.clientX - oDiv.offsetLeft;
+        let disY = e.clientY - oDiv.offsetTop;
+
+        document.onmousemove = function (e) {
+          //通过事件委托，计算移动的距离
+          let l = e.clientX - disX;
+          let t = e.clientY - disY;
+          console.log(oDiv.offsetWidth, l, oDiv.offsetLeft)
+          //移动当前元素
+          if (l > 0) {
+            l = 0;
+          } else if (l < -978) {
+            l = -978
+          }
+
+          oDiv.style.left = l + "px";
+          // oDiv.style.top = t + "px";
+        }
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+        //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
+        return false;
+      };
     }
   }
 }