使用.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
}
}