class Dialog {
	constructor(text) {
		this.lastX = 0
		this.lastY = 0
		this.x
		this.y
		this.text = text || ''
		this.isMoving = false
		this.dialog
	}
	open() {
		const model = document.createElement('div')
		model.id='model'
		model.style = `
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		background-color:rgba(0,0,0,.3);
		display:flex;
		justify-content: center;
		align-items: center;`
		model.addEventListener('click',this.close.bind(this))
		document.body.appendChild(model)
		this.dialog = document.createElement('div')
		this.dialog.style = `
		padding:20px;
		background-color:white`
		this.dialog.innerText = this.text
		this.dialog.addEventListener('click',e=>{e.stopPropagation()})
		this.dialog.addEventListener('mousedown', this.handleMousedown.bind(this))
		document.addEventListener('mousemove', this.handleMousemove.bind(this))
		document.addEventListener('mouseup', this.handleMouseup.bind(this))
		model.appendChild(this.dialog)
	}
	close() {
		this.dialog.removeEventListener('mousedown',this.handleMousedown)
		document.removeEventListener('mousemove', this.handleMousemove)
		document.removeEventListener('mouseup',this.handleMouseup)
		document.body.removeChild(document.querySelector('#model'))
	}
	handleMousedown(e) {
		this.isMoving = true
		this.x = e.clientX
		this.y = e.clientY
	}
	handleMousemove(e) {
		if (this.isMoving) {
			this.dialog.style.transform = `translate(${e.clientX - this.x + this.lastX}px,${e.clientY - this.y + this.lastY}px)`
		}
	}
	handleMouseup(e) {
		this.lastX = e.clientX - this.x + this.lastX
		this.lastY = e.clientY - this.y + this.lastY
		this.isMoving = false
	}
}
let dialog = new Dialog('Hello')
dialog.open()