element-ui表格单行拖动，新增拖动效果到容器

需求:table表格单行可拖动

 

 

 单行表格可拖动到指定容器并渲染

 

 

 

可拖动用draggable属性，遍历el-table__row，给他们加上draggable，让其可拖动

t.addEventListener(
        "dragover",
        (e) => {
        //拖动到容器鼠标样式显示‘copy’效果
          e.preventDefault();
          e.dataTransfer.dropEffect = "copy"
          this.control = true;
        },
        true
      );
      t.addEventListener(
        "dragleave",
        (e) => {
          if (e.fromElement != null) {
            this.control = false;
          } else {
            this.control = true;
          }
        },
        true
      );

 

实现效果图：

 

 拖动单行到指定容器：

 

 成功实现需求效果！

 

vue文件源码：

<template>
  <div class="componentA">
    <el-table
      :data="this.tableData1"
      @row-click="searchInfo"
      ref="table"
      height="290px"
      :row-style="{ height: '20px' }"
      :cell-style="{ padding: '0px' }"
    >
      <el-table-column prop="date" label="日期" width="120" class="table-item"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" class="table-item"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300px" class="table-item">
      </el-table-column>
    </el-table>
    <el-card class="frame" >
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        >
      </div>
      <div class="drag" id="drag" v-show="showbox">
        <div>将数据拖入此区域</div>
      </div>
      <template v-if="cache != null">
        <div class="card-item">日期：{{ cache.date }}</div>
        <div class="card-item">姓名：{{ cache.name }}</div>
        <div class="card-item">地址：{{ cache.address }}</div>
      </template>
    </el-card>
  </div>
</template>

<script>
import Home from "./Home.js";
export default Home;
</script>

<style>
.drag{
  width: 300px;
  height: 100px;
  border: 1px dashed black;
  text-align: center;
  line-height: 100px;
}
.frame {
  /* width: 500px;
  height: 400px; */
  text-align: left;
}
.table-item{
  cursor: move;
}
/* @import "./componentA.css"; */
</style>

js文件源码：

export default {
    data() {
      return {
        count: 0,
        tableData: [
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
        ],
        tableData1: [],
        cache: null,
        control: null,
        showbox:true
      };
    },
    created() {
      this.tableData1 = this.tableData;
    },
    
    mounted() {
      let s = document.getElementsByClassName("el-table__row");
      // s.style.cursor = "move";
      let t = document.getElementsByClassName("frame")[0];
      for (let i = 0; i < s.length; i++) {
        s[i].setAttribute("draggable", true);
      }
     
      
      window.addEventListener(
        "dragend",
        (e) => {
          e.path[0].click();
          console.log(e); 
        },
        true
      );
      t.addEventListener(
        "dragover",
        (e) => {
          e.preventDefault();
          e.dataTransfer.dropEffect = "copy"
          this.control = true;
        },
        true
      );
      t.addEventListener(
        "dragleave",
        (e) => {
          if (e.fromElement != null) {
            this.control = false;
          } else {
            this.control = true;
          }
        },
        true
      );
    //   t.addEventListener('dragover', function (event) {
    //     event.preventDefault();
    //     // 设置dropEffect值为选中的单选选项
    //     event.dataTransfer.dropEffect = "copy"
    // });
    },
    methods: {
      searchInfo(e) {
        let count = this.clone(e);
        if (this.control) {
          if (this.cache != null) {
            for (let i in this.cache) {
              delete this.cache[i];
            }
            this.cache = count;
            this.showbox = false
          } else {
            this.cache = count;
            this.showbox = false
          }
        }
        this.control = false;
        console.log(this.cache);
      },
      //定义检测数据类型的功能函数
      checkedType(target) {
        return Object.prototype.toString.call(target).slice(8, -1);
      },
      //实现深度克隆---对象/数组
      clone(target) {
        //判断拷贝的数据类型
        //初始化变量result 成为最终克隆的数据
        let result,
          targetType = this.checkedType(target);
        if (targetType === "Object") {
          result = {};
        } else if (targetType === "Array") {
          result = [];
        } else {
          return target;
        }
        //遍历目标数据
        for (let i in target) {
          //获取遍历数据结构的每一项值。
          let value = target[i];
          //判断目标结构里的每一值是否存在对象/数组
          if (
            this.checkedType(value) === "Object" ||
            this.checkedType(value) === "Array"
          ) {
            //对象/数组里嵌套了对象/数组
            //继续遍历获取到value值
            result[i] = this.clone(value);
          } else {
            //获取到value值是基本的数据类型或者是函数。
            result[i] = value;
          }
        }
        return result;
      },
    },
  };