<template>
  <div  class="ssc" id="ssc">
    <div class="button-box" v-drags >
      +
    </div>
    <div class="button-box" v-drags="'ssc'" >
      8
    </div>
    <div class="button-box" v-drags >
      3
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '双击显示案件详情',
      isOpen: false,
      isMove: false
    }
  },
  methods: {
    openBox () {
      console.log('双击')
    },
    mousedowm (e) { // 鼠标按下时的鼠标所在的X，Y坐标
      // 初始位置的X，Y 坐标
      console.log('e', e)
      // 表示鼠标已按下
      this.flag = true
    },
    mousemove (e) {
      if (this.flag) {
        console.log('e :', e)
      }
    }
  },
  directives: {
    drags (el) {
      let oDiv = el // 当前元素
      // 禁止选择网页上的文字
      document.onselectstart = function () {
        return false
      }
       document.getElementById('ssc')
      // 手机端
      oDiv.ontouchstart = function (e2) {
        // 鼠标按下，计算当前元素距离可视区的距离
        let disX = e2.targetTouches[0].clientX - oDiv.offsetLeft
        let disY = e2.targetTouches[0].clientY - oDiv.offsetTop
        document.ontouchmove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.targetTouches[0].clientX - disX
          let t = e.targetTouches[0].clientY - disY
          // 移动当前元素
          oDiv.style.left = l<0?0:(l>(window.innerWidth - oDiv.clientWidth))?(window.innerWidth - oDiv.clientWidth):l + 'px'
          oDiv.style.top = t<0?0:(t>(window.innerHeight - oDiv.clientHeight))?(window.innerHeight - oDiv.clientHeight):t + 'px'
        }
        document.ontouchend = function (e) {
          document.ontouchmove = null
          document.ontouchend = null
        }
        return false
      }
      // 电脑端
      oDiv.onmousedown = function (e2) {
        // 鼠标按下，计算当前元素距离可视区的距离
        let disX = e2.clientX - oDiv.offsetLeft
        let disY = e2.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX
          let t = e.clientY - disY
          // 移动当前元素 innerHeight innerWidth
         oDiv.style.left = l<0?0:(l>(window.innerWidth - oDiv.clientWidth))?(window.innerWidth - oDiv.clientWidth):l + 'px'
          oDiv.style.top = t<0?0:(t>(window.innerHeight - oDiv.clientHeight))?(window.innerHeight - oDiv.clientHeight):t + 'px'
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    }
  }
}
</script>

<style scoped>
.ssc{
  width: 300px;
  height: 600px;
  background-color: #ff0;
  position: relative;
}
.button-box {
  width: 60px;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  border: 1px solid #000;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  right: 50px;
  z-index: 888;
   height: 60px;
}
</style>