• 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
        }
    }
    
    
  • 相关阅读:
    随笔
    3.1作业
    关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)
    utf-8转换为base64
    base64转换为utf-8
    Java Web基础——jsp调用动态界面
    Java Web基础——JSP指令标记
    2020软件工程最后一次作业
    软件工程第二次结对作业
    软件工程第三次作业
  • 原文地址:https://www.cnblogs.com/yzyh/p/12695247.html
Copyright © 2020-2023  润新知