js实现拖拽

使用.vue

<template>
    <div>6666666</div>
</template>
<script>
import { Sdk } from './sdk'
export default {
    mounted() {
        const sdks = new Sdk({ right: '0', bottom: '20px' })
        sdks.renderDom()
    }
}
</script>

sdk.js

export class Sdk {
    constructor(options) {
        this.top = options.top
        this.right = options.right
        this.bottom = options.bottom
        this.left = options.left
    }
    renderDom() {
        const self = this
        const sdkDom = function(content) {
            ;(function(content) {
                const div = document.createElement('div')
                div.innerHTML = content
                div.id = 'sdkDom'
                div.style.color = 'red'
                div.style.width = '200px'
                div.style.height = '200px'
                div.style.background = 'red'
                div.style.position = 'fixed'
                div.style.cursor = 'pointer'
                // div.addEventListener('click', self.bntClick)
                const paras = document.getElementById('sdkDom')
                if (paras != null) {
                    paras.parentNode.removeChild(paras)
                    document.getElementsByTagName('body')[0].appendChild(div)
                } else {
                    document.getElementsByTagName('body')[0].appendChild(div)
                }
                self.bindDrag(div)
                self.setPosition(div)
            })(content)
        }
        sdkDom('')
    }
    bntClick() {
        alert('惊喜与意外！')
    }
    bindDrag(dragObj) {
        const self = this
        dragObj.style.left = '0px'
        dragObj.style.top = '0px'

        var mouseX, mouseY, objX, objY
        var dragging = false
        var diffX, diffY
        var timeId
        var i

        dragObj.onmousedown = function(event) {
            i = 0
            event = event || window.event
            dragging = true
            mouseX = event.clientX // 初始位置时鼠标的坐标
            mouseY = event.clientY
            objX = dragObj.offsetLeft // 元素的初始位置
            objY = dragObj.offsetTop
            diffX = mouseX - objX // 相当于鼠标距物体左边的距离
            diffY = mouseY - objY
        }
        document.onmousemove = function(event) {
            event = event || window.event
            if (dragging) {
                i += 0.1
                // 元素左边距等于鼠标移动的宽度加上元素本身的位置
                dragObj.style.left = event.clientX - mouseX + objX + 'px'
                dragObj.style.top = event.clientY - mouseY + objY + 'px'

                // 设置边界
                if (event.clientX - diffX < 0) {
                    // 鼠标到浏览器左边距小于鼠标到obj的左边距
                    dragObj.style.left = 0 + 'px'
                } else if (event.clientX - diffX > window.innerWidth - dragObj.offsetWidth) {
                    // window.innerWidth浏览器显示区域的宽度，dragObj.offsetWidth物体宽度
                    dragObj.style.left = window.innerWidth - dragObj.offsetWidth + 'px'
                }
                if (event.clientY - diffY < 0) {
                    dragObj.style.top = 0 + 'px'
                } else if (event.clientY - diffY > window.innerHeight - dragObj.offsetHeight) {
                    dragObj.style.top = window.innerHeight - dragObj.offsetHeight + 'px'
                }
            }
        }
        document.onmouseup = function() {
            clearInterval(timeId)
            if (i <= 0.5) {
                console.log('是点击')
                self.bntClick()
            } else {
                console.log('是拖拽')
            }
            dragging = false
        }
    }
    setPosition(dragObj) {
        dragObj.style.left = this.left || null
        dragObj.style.top = this.top || null
        dragObj.style.bottom = this.bottom || null
        dragObj.style.right = this.right || null
    }
}