vue拖动组件代码块

drag.gif

demo.vue

<template>
  <div class="plat">
    <cell></cell>
    <cell></cell>
  </div>
</template>
<script>
import cell from "./mover";

export default {
  components: { cell },
  data() {
    return {};
  }
};
</script>
<style  scoped>
.plat {
  position: relative;
  width: 1000px;
  height: 100px;
  top: 100px;
  left: 0;
  border: 1px solid #000;
}
</style>

mover.vue

<template>
  <div class="moveCell" ref="movecell">
    <div class="leftpain" data-param='left'></div>
    <div class="middlepain" data-param='middle' ></div>
    <div class="rightpain" data-param='right' ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.addListen();
    },
    addListen() {
      let movecell = this.$refs.movecell;
      let flag = false;
      let node = "";
      let startpoint = "";
      let originleft = "";
      let originwidth='';
      let type='';
      movecell.addEventListener("mousedown", function(e) {
        flag = true;
        node = e.target;
        startpoint = e.clientX;
        originleft = parseFloat(getStyle(e.target.parentNode, "left"));
        originwidth=parseFloat(getStyle(e.target.parentNode, "width"));
        if(e.target.dataset.param==='left'){
            type='left'
        }
        if(e.target.dataset.param==='middle'){
            type='middle'
        }
        if(e.target.dataset.param==='right'){
            type='right'
        }

        
      });

      document.addEventListener("mouseup", function() {
        flag = false;
        node = "";
        startpoint = "";
        originleft = "";
      });

      document.addEventListener("mousemove", function(e) {
        if (flag) {
          let endpoint = e.clientX;
          let data = endpoint - startpoint;
          console.log(originleft, data, "zhi");
          if(type==='middle'){
              //move
          node.parentNode.style.left = data + originleft + "px";

          }
          if(type==='left'){
              //left
             node.parentNode.style.left = data + originleft + "px";
              node.parentNode.style.width=-data+originwidth+'px'
          }
          if(type==='right'){
              //right
              node.parentNode.style.width=data+originwidth+'px'


          }
        }
      });
      function getStyle(node, styleType) {
        return node.currentStyle
          ? node.currentStyle[styleType]
          : getComputedStyle(node)[styleType]; //浏览器中有node.currentStyle方法就用，没有就用另一个
      }
    }
  }
};
</script>
<style scoped>
.moveCell {
  position: absolute;
  left: 0;
  top: 0;
  /* border: 1px solid #000; */
  height: 100px;
  /* overflow: hidden; */
  width: 100px;
}
.leftpain {
  position: absolute;
  cursor: col-resize;
  background-color: rgba(92, 123, 209, 0.424);
  width: 10px;
  height: 100px;
  left: 0;
  top: 0;
}
.leftpain:hover,.rightpain:hover{
  background-color: rgba(16, 75, 236, 0.424);

}
.middlepain {
  position: absolute;
  cursor: move;
  background-color: rgba(92, 123, 209, 0.424);
  height: 100px;
  left: 10px;
  right: 10px;
  top: 0;
}
.rightpain {
  position: absolute;
  cursor: col-resize;
  background-color: rgba(92, 123, 209, 0.424);
  height: 100px;
  width: 10px;
  right: 0px;
  top: 0;
}
</style>