console
let drag = false
let position = null
let good = document.querySelector('#good')
good.addEventListener('mousedown',function(e){
drag = true
position = [e.clientX,e.clientY]
console.log(position)
})
good.addEventListener('mousemove',function(e){
if(!drag) return null
// 移动的距离
let transX = e.clientX - position[0]
let transY = e.clientY - position[1]
console.log('当前移动x为：',transX,'当前移动y为：',transY)
// 原本的位置
const left = parseInt(good.style.left || 0)
const top = parseInt(good.style.top || 0)
// position 定义类型为 relative ，相对本身 移动
good.style.left = transX + left + 'px'
good.style.top = transY + top + 'px'
// 更新该值
position = [e.clientX, e.clientY]
})
good.addEventListener('mouseup',function(e){
drag = false
console.log('松开鼠标')
})
/* console.log('------------------------------')
console.log( 1 + '1')
console.log( 1 - '1')
console.log( 1 * '1')
console.log( 1 / '1')
console.log( 1 - NaN)
console.log( 1 - undefined)
console.log( 1 - null)
console.log('------------------------------')
if(undefined){
console.log('判断underfined 的boolean类型')
}
console.log('------------------------------')
console.log( typeof undefined)
console.log( typeof null)
console.log( undefined instanceof Object)
console.log( null instanceof Object)
console.log( '1111' instanceof Object)
*/
<div id="good">red</div>
#good{
position: relative;
color: red;
width: 100px;
height: 100px;
background-color: white;
}