vue.js可拖拽的悬浮组件

2019-04-29
0 评论 877 浏览

demo.gif

main.js

这里用到了vue的自定义指令,实现拖拽的功能

Vue.directive('move', {
  inserted: function(a) {
    // 鼠标按下事件
    a.onmousedown = function(e) {
      var disX = e.clientX - a.offsetLeft
      var disY = e.clientY - a.offsetTop

      if (a.setCapture) {
        a.setCapture()
      }
      // 鼠标移动事件-----给文档流绑定移动事件
      document.onmousemove = function(e) {
        e.preventDefault()
        var L = e.clientX - disX
        var T = e.clientY - disY

        L = Math.min(Math.max(L, 0), document.documentElement.clientWidth - a.offsetWidth)
        T = Math.min(Math.max(T, 0), document.documentElement.clientHeight - a.offsetHeight)

        a.style.left = L + 'px'
        a.style.top = T + 'px'
      }
      // 鼠标离开事件
      document.onmouseup = function() {
        document.onmousemove = document.onmousedown = null
        if (a.releaseCapture) {
          a.releaseCapture()// 拖动后在解除事件锁定
        }
      }
    }
  }
})

drag.vue

想要换成什么组件,功能,样式,直接根据需要自己修改即可

<template>

  <div id="app">
    <div>
      <el-tooltip class="item"
                  effect="dark"
                  content="切换列表/视图"
                  placement="top-start">
        <div class="squal"
             v-move>

          <el-switch style="display: block;left:50%;top:50%;transform:translate(-50%,-50%);"
                     @change="list2view"
                     v-model="value4"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     active-text=""
                     inactive-text="">
          </el-switch>

        </div>
      </el-tooltip>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value4: true
    }
  },
  methods: {
    list2view() {
      alert(111)
    }
  }
}
</script>


<style>
.squal {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: #f2f6fc;
  position: absolute;
  right: 12%;
  bottom: 13%;
  border-radius: 50%;
  z-index: 500;
}
</style>

标题:vue.js可拖拽的悬浮组件
作者:fish2018
地址:http://www.devopser.org/articles/2019/04/26/1556265313871.html

评论
发表评论