完善拖拽功能

src/components/ShowFile/ShowFile.vue

@@ -942,13 +942,17 @@
         let gridItemChildenClassName = 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'
 
         // 目标元素
-        let target = document.querySelector('.el-table__body-wrapper tbody');
+        let target = document.querySelector('.el-table__body-wrapper tbody')
 
         if(this.grid){
           target = document.querySelector('.van-checkbox-group .van-grid')
         }
 
         let rows = 0;//行数
+
+        let img = new Image();
+        img.src = require('@/assets/img/File.png')
+
         setTimeout(function () {
           rows = target.childElementCount
           _this.dragElementList = []
@@ -969,8 +973,15 @@
 
             // 使元素可拖动
             child.draggable = true
+            // 使元素可拖动
+            child.slot = 'jmal'
 
             child.ondragstart = function(e){
+              // img.src = require('@/assets/img/File.png')
+
+              e.dataTransfer.setDragImage(img, 0, 0);
+
+              Bus.$emit('onDragStart', true)
               // 避免和画矩形选取冲突
               _this.drawFlag = false
               let rectangle = document.getElementById('rectangle1')
@@ -986,12 +997,9 @@
               dragged.style.cursor = 'grabbing'
               dragged.style.borderRadius = '10px'
               dragBackCorlor = dragged.style.backgroundColor
-
-              let dragImage = document.createElement('img')
-              dragImage.src = require('@/assets/img/File.png')
-              e.dataTransfer.setDragImage(dragImage, 10, 10);
             }
             child.ondragend = function(){
+              Bus.$emit('onDragStart', false)
               // console.log('child'+i+'拖拽结束');
               // 清除上次进入的容器的状态
               const last = target.children[dragIndex];
@@ -1076,13 +1084,7 @@
                 // 改变本次进入的容器的状态
                 dragged.style.cursor = 'copy'
                 dragEnterBackCorlor = throughRow.style.backgroundColor
-                // throughRow.style.backgroundColor = '#e9fdcf'
-                if(_this.grid){
-                  throughRow.style.height = throughRow.clientWidth + 15 +'px'
-                  throughRow.style.width = throughRow.clientWidth + 15 +'px'
-                }else{
-                  throughRow.style.height = 60+'px'
-                }
+                throughRow.style.backgroundColor = '#9fcdfc99'
               }
               dragIndex = throughRow.rowIndex
             }
@@ -1141,13 +1143,17 @@
           if(node){
             if(_this.grid){
               node = node.children[0].children[0]
-              node.style.height = null
-              node.style.width = null
-              // node.style.backgroundColor = dragEnterBackCorlor
-              dragged.style.cursor = 'grabbing'
+              if(node.style.backgroundColor !== 'rgba(202, 234, 249, 0.57)'){
+                node.style.backgroundColor = null
+              }
             }else{
               node.style.height = 'unset'
+              //#F5F7FA
+              if(node.style.backgroundColor !== 'rgb(245, 247, 250)'){
+                node.style.backgroundColor = null
+              }
             }
+            dragged.style.cursor = 'grabbing'
           }
           dragged.style.backgroundColor = dragBackCorlor
         }

src/views/test/图片上加文字.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Example of DataTransfer.setDragImage()</title>
+<meta name="viewport" content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+</script>
+<body>
+<img src="../../assets/img/moveFile.png">
+<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
+<div>
+  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>

src/views/test/拖拽.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Example of DataTransfer.setDragImage()</title>
+<meta name="viewport" content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+  function dragstart_handler(ev) {
+    console.log("dragStart");
+    // 设置拖动的格式和数据。使用事件目标的id作为数据
+    // ev.dataTransfer.setData("text/plain", ev.target.id);
+    // 创建一个图像并且使用它作为拖动图像
+    // 请注意： 改变 "example.gif" 为一个已经存在的图片
+    // 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
+    // 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
+    let img = new Image();
+    img.src = 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
+    ev.dataTransfer.setDragImage(img, 10, 10);
+  }
+
+  function dragover_handler(ev) {
+    console.log("dragOver");
+    ev.preventDefault();
+  }
+
+  function drop_handler(ev) {
+    console.log("Drop");
+    ev.preventDefault();
+    // 获取拖放目标的id数据
+    let data = ev.dataTransfer.getData("text");
+    ev.target.appendChild(document.getElementById(data));
+  }
+</script>
+<body>
+<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
+<div>
+  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>