码迷,mamicode.com
首页 > 其他好文 > 详细

VUE 拖拽框

时间:2020-01-14 16:37:32      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:ntb   func   client   select   style   element   def   mouse   class   

 <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 拖拽框

标签:ntb   func   client   select   style   element   def   mouse   class   

原文地址:https://www.cnblogs.com/amadoGrowers/p/12192298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!