vue注册局部组件拖拽指令

一、使用注册指令

• 然后可以直接使用v-drag实现拖拽效果

 directives: {
      drag (el) {
        let oDiv = el //当前元素
        oDiv.onmousedown = function (e) {
          //鼠标按下，计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft
          let disY = e.clientY - oDiv.offsetTop
          document.onmousemove = function (e) {
            //通过事件委托，计算移动的距离
            let l = e.clientX - disX
            let t = e.clientY - disY
            // 防止越界
            if (l < 0) {
              l = 0
            }
            /* document.documentElement.clientWidth
            获取浏览器窗口文档显示区域的宽度，不包括滚动条。

            document.documentElement.clientHeight
            获取浏览器窗口文档显示区域的高度，不包括滚动条。*/

            //如果左侧的距离>屏幕的宽度-元素的宽度。也就是说元素的右侧超出屏幕的右侧，就让元素的右侧在屏幕的右侧上
            if (l > document.documentElement.clientWidth - oDiv.getBoundingClientRect().width) {
              l = document.documentElement.clientWidth - oDiv.getBoundingClientRect().width
            }
            console.log(document.documentElement.clientWidth)
            if (t < 0) {
              t = 0
            }
            if (t > document.documentElement.clientHeight - (oDiv.offsetHeight - 400)) {
              t = document.documentElement.clientHeight - (oDiv.offsetHeight - 400)
            }
            if (t > document.body.clientHeight - oDiv.getBoundingClientRect().height) {
              // t = document.body.clientHeight - oDiv.getBoundingClientRect().height - 120
              t = 0
            }
            //移动当前元素
            oDiv.style.left = l + 'px'
            oDiv.style.top = t + 'px'
          }
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      },
    },

二、使用Tdrag

插件地址：http://www.jq22.com/jquery-info8362

• Tdrag属于拖拽类的一款插件，基于jquery而成，兼容1.4以上版本的jquery，兼容浏览器：chrome、firfox、IE7等以上主流浏览器

1. 引入

 import $ from 'jquery'
  import '@/plugins/Tdrag/Tdrag'

1. 使用
   初始值：
   var call = {
   scope: null,//父级
   grid: null,//网格
   axis:“all”,//上下或者左右
   pos:false,//是否记住位置
   handle:null,//手柄
   moveClass:“tezml”,//移动时不换位加的class
   dragChange:false,//是否开启拖拽换位
   changeMode:“point”,//point & sort
   cbStart:function(){},//移动前的回调函数
   cbMove:function(){},//移动中的回调函数
   cbEnd:function(){},//移动结束时候的回调函数
   random:false,//是否自动随机排序
   randomInput:null,//点击随机排序的按钮
   animation_options:{//运动时的参数
   duration:800,//每次运动的时间
   easing:“ease-out”//移动时的特效，ease-out、ease-in、linear
   },
   disable:false,//禁止拖拽
   disableInput:null//禁止拖拽的按钮
   };

       $(document).ready( ()=> {
          /*lua中的一个函数,math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.*/
          for (var i = 1; i <= this.intercomBoxDatas.length; i++) {
            var css = {
              // left:(Math.ceil((id + 1) % 5.1) - 1)*20+.2+"%",
              // top:(Math.ceil((id + 1) / 5.1) - 1) * top
              left: (Math.ceil((i) % 5.1) - 1) * 19 + 4 + '%',
              top: (Math.ceil((i + 1) / 6.1) - 1) * 200 + 20
            }
            var a = '#intercomBox' + i
            var b = '#intercomBox-up' + i
            $(a).Tdrag({
                scope: '.intercomBoxContainer',
                handle: b,//手柄,
              }
            )
            $(a).css(css)
          }
        })

三、 效果如下：