VUE 拖拽框

Posted amadogrowers

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 拖拽框相关的知识,希望对你有一定的参考价值。

 <div @mousedown="mousedown" id="dragbox" class="dragbox">
 </div>

    mousedown(event) {
      this.selectElement = document.getElementById("dragbox");
      var div1 = this.selectElement;
      this.selectElement.style.cursor = "move";
      this.isDowm = true;
      var distanceX = event.clientX - this.selectElement.offsetLeft;
      var distanceY = event.clientY - this.selectElement.offsetTop;
      document.onmousemove = function(ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },

以上是关于VUE 拖拽框的主要内容,如果未能解决你的问题,请参考以下文章

简单拖拽即生成网页 VvvebJs

vue实现拖拽图标建文件夹源码怎么弄

拖拽式Vue组件代码生成平台(LCG)新版详细介绍

拖拽式Vue组件代码生成平台(LCG)新版详细介绍

基于Vue实现拖拽升级(九宫格拖拽)

vue实现拖拽组件