美文网首页
vue.js封装拖拽组件,移动到浏览器边框自动隐藏

vue.js封装拖拽组件,移动到浏览器边框自动隐藏

作者: 六时未至 | 来源:发表于2020-12-09 08:34 被阅读0次

    先看效果

    效果图
    要实现拖拽主要就是要计算出拖拽组件在浏览器窗口的位置,距离浏览器窗口一定距离时将组件定位到浏览器边上。
    需要了解clientX,clientY, offsetLeft, offsetTop, document.documentElement.clientWidth,document.documentElement.clientHeight等概念。】
    使用方式较简单,如下,在uni-drag组件中添加需要拖拽的内容即可。
    <template>
      <uni-drag @drag-start="dragStart" @drag-end="dragEnd">
        <div class="test-drag">dragMe</div>
      </uni-drag>
    </template>
    <script>
    export default {
      methods: {
        dragStart: function(event) {
          this.$message({
            type: 'info',
            message: `拖拽开始,通过console可以查看event参数, ${JSON.stringify(event)}`
          })
          console.info('拖拽开始', event)
        },
        dragEnd: function(event) {
          this.$message({
            type: 'info',
            message: `拖拽结束,通过console可以查看event参数, ${JSON.stringify(event)}`
          })
          console.info('拖拽结束', event)
        }
      }
    }
    </script>
    <style scoped>
    .test-drag {
      padding: 50px;
      background-color: #149ef1;
      width: 50px;
    }
    </style>
    

    组件主要源码如下:完整代码请戳这里:传送门

      directives: {
        drag: {
          bind: function(el, binding, vnode) {
            const moveEl = el
            moveEl.onmousedown = (event) => {
              // 获取事件触发位置与元素左上角的偏移量
              const disX = event.clientX - moveEl.offsetLeft
              const disY = event.clientY - moveEl.offsetTop
              // 页面的宽度和高度
              const width = document.documentElement.clientWidth
              const height = document.documentElement.clientHeight
              // 触发拖拽开始事件
              vnode.context.$emit('drag-start', event)
              document.onmousemove = (dEvent) => {
                // 鼠标移动时,将元素定位到鼠标移动的位置,减去鼠标与元素左上角的偏移量
                const left = dEvent.clientX - disX
                const top = dEvent.clientY - disY
                moveEl.style.left = left + 'px'
                moveEl.style.top = top + 'px'
              }
              document.onmouseup = (event) => {
                document.onmousemove = null
                document.onmouseup = null
                const box = moveEl.getBoundingClientRect()
                // 当鼠标up时判断当前元素位置是否满足隐藏条件
                let left = box.x
                let top = box.y
                if (vnode.context.hide) {
                  left = left > width - moveEl.offsetWidth - vnode.context.hideMinMargin ? width - vnode.context.minShowWidth
                    : left < -(moveEl.offsetWidth - vnode.context.minShowWidth) || left < vnode.context.hideMinMargin ? -(moveEl.offsetWidth - vnode.context.minShowWidth) : left
                  // 在4个角落时,防止x和y轴同时隐藏,判断x轴隐藏了,y轴便固定为0,或着最底部
                  top = left === width - vnode.context.minShowWidth || left === -(moveEl.offsetWidth - vnode.context.minShowWidth) ? (top < vnode.context.hideMinMargin ? 0
                    : box.bottom > height - vnode.context.hideMinMargin ? height - box.height : top)
                    : top < vnode.context.hideMinMargin ? -(box.height - vnode.context.minShowWidth)
                      : box.bottom > height - vnode.context.hideMinMargin ? height - vnode.context.minShowWidth : top
                }
                moveEl.style.left = left + 'px'
                moveEl.style.top = top + 'px'
                // 触发拖拽结束事件
                vnode.context.$emit('drag-end', event)
              }
            }
          }
        }
      }
    

    相关文章

      网友评论

          本文标题:vue.js封装拖拽组件,移动到浏览器边框自动隐藏

          本文链接:https://www.haomeiwen.com/subject/adlqgktx.html