vue，拖拽自定义指令

directives: {
    drag: {
      // (el, binding)
      inserted: function (el, binding) {
        var oDiv = el.children[3]
        var parent = el
        var validArea = 5
        let elHeight = 0 // 当前拖拽的元素高度
        var currentChild = null
        oDiv.onmousedown = function (ev) {
          // 获取event对象，兼容性写法
          var events = ev || event
          // 获取当前元素所在页，并返回有效空间
          var currentPage = el
          console.log(currentPage)

          var myParents = getParents(el, 'page')
          var myPage = myParents[myParents.length - 1]
          var myPageChild = myPage.children

          var diamonds = getDiamonds(myPageChild)

          // 当前元素所在的页面有效宽度
          var currentPageWidth = diamonds[1].left - (diamonds[0].left + diamonds[0].width)

          // 当前元素所在的页面有效高度
          var currentPageHeight = diamonds[3].top - (diamonds[0].top + diamonds[0].height)

          console.log(currentPageWidth, currentPageHeight)

          // 鼠标按下时的位置
          // var mouseDownX = events.clientX
          var mouseDownY = events.clientY
          // 方块上下左右四个边的位置和方块的长宽
          // var T0 = this.offsetTop
          var B0 = parent.offsetTop + parent.offsetHeight

          var H = parent.offsetHeight

          // 最小高度
          var minH = 100

          // 设置方块的识别范围
          var areaB = B0 - validArea

          var changeB = mouseDownY > areaB
          console.log(changeB)
          changeB = true

          // IE8 取消默认行为-设置全局捕获
          if (oDiv.setCapture) {
            oDiv.setCapture()
          }

          document.onmousemove = function (ev) {
            var events = ev || event

            // 鼠标移动时的鼠标位置
            var mouseMoveY = events.clientY

            // 移动的鼠标坐标Y-按下鼠标坐标Y = 实际目标元素的高度
            if (mouseMoveY - mouseDownY > 0) {
              // 向下拉
              elHeight = (mouseMoveY - mouseDownY) + H - 2
            } else {
              // 向上拉
              elHeight = (mouseMoveY - mouseDownY) + H - 2
            }

            // 如果实际目标元素的高度<最小高度，则给其最小高度
            if (parseInt(elHeight) <= minH) {
              elHeight = minH
            }

            currentChild = getDiamondsChildren(myPageChild)
            if (currentChild.totalHeight >= currentPageHeight) {
              parent.style.background = 'red'
            } else {
              parent.style.background = ''
            }

            parent.style.height = elHeight + 'px'
          }
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
            // isMax = false

            currentChild = null

            // 当前页面所有元素的宽高等信息
            currentChild = getDiamondsChildren(myPageChild)
            let sumPage = 0
            currentChild.data.filter((item) => {
              // 除去题型的高度
              if (item.elName.indexOf('question') === -1) {
                sumPage += item.actualHeight
              }
            })
            console.log(sumPage)
            let questionMaxHeight = currentPageHeight - sumPage
            console.log('questionMaxHeight=' + questionMaxHeight)

            if (currentChild.totalHeight >= currentPageHeight) {
              // 最终赋值
              // let question = myPage.querySelector('.question')
              let questionChild = myPage.querySelector('.question .mydrag').children
              let sum = 0
              let qcLen = questionChild.length

              if (qcLen !== 0) {
                for (let i = 0; i < qcLen; i++) {
                  if (parent !== questionChild[i]) {
                    sum = sum + questionChild[i].offsetHeight + 15
                  }
                }
              }

              elHeight = questionMaxHeight - sum
            }

            parent.style.height = elHeight + 'px'

            parent.style.background = ''
            // 释放全局捕获
            if (oDiv.releaseCapture) {
              oDiv.releaseCapture()
            }
          }
          return false
        }

        function getDiamonds (myPageChild) {
          let temp = []
          for (let i = 0; i < 4; i++) {
            temp.push({
              top: myPageChild[i].offsetTop,
              left: myPageChild[i].offsetLeft,
              width: myPageChild[i].offsetWidth,
              height: myPageChild[i].offsetHeight

            })
          }
          return temp
        }
        function getDiamondsChildren (myPageChild) {
          let temp = []
          let len = myPageChild.length
          let next = null; let current = null
          let totalHeight = 0
          for (let i = 4; i < len; i++) {
            current = myPageChild[i]
            if (myPageChild[i + 1] !== undefined) {
              next = myPageChild[i + 1]
              temp.push({
                elName: current.className,
                top: current.offsetTop,
                left: current.offsetLeft,
                width: current.offsetWidth,
                height: current.offsetHeight,
                actualHeight: next.offsetTop - current.offsetTop
              })
            } else {
              temp.push({
                elName: current.className,
                top: current.offsetTop,
                left: current.offsetLeft,
                width: current.offsetWidth,
                height: current.offsetHeight,
                actualHeight: current.offsetHeight
              })
            }

            totalHeight = totalHeight + temp[i - 4].actualHeight
          }

          return { 'totalWidth': 0, 'totalHeight': totalHeight, 'data': temp }
        }

        function getParents (el, parentClassName) {
          var parentEle = parentClassName
          // If no parentSelector defined will bubble up all the way to *document*
          if (parentEle === undefined) {
            parentEle = document
          }

          var parents = []
          var p = el.parentNode

          // 找到其父级，直到body 通过className来判断
          while (p !== document.body && p.className.toLowerCase() !== parentEle) {
            var o = p
            parents.push(o)
            p = o.parentNode
          }
          parents.push(p) // Push that parentSelector you wanted to stop at
          return parents
        }
      }
    }
  },