ES6 用class方式實現鼠標拖拽
鼠標拖拽div ，div隨機顏色生成
<script>
//1.首先創建一個拖拽類
class Drag {
constructor() {//constructor 類的構造函數
//這個了作用域裏 this 代表着new操作符創建的空實例對象
//2.新建一個dom節點
this.div = document.createElement('div')
//3.給dom節點設置一些樣式
this.div.style.cssText = `
width:100px;
height:100px;
position:absolute;
background:green;
left:0;
top:0;
`
//4.讓dom節點上樹
document.body.appendChild(this.div)
//調用隨機顏色方法
this.random()
//5.調用開始方法，也就是監聽鼠標按下
this.start()
}
start() {
//開始方法
//在此方法中監聽鼠標按下
//該方法需要在構造函數裏調用，用來創建一個，就start方法
//在start作用域裏this代表着 new操作符創建的實例對象
//6.監聽鼠標按下事件
this.div.onmousedown = (evt)=> {
//因爲let只在當前作用域中起作用。所以，我們這裏用this. 也就是用屬性的方法，保存值
//7.需要先找到鼠標在按下時的位置
this.downX=evt.clientX;
this.downY=evt.clientY;
//8.找到，div移動前的位置
this.downLeft=this.div.offsetLeft;
this.downTop=this.div.offsetTop;
//這個作用域裏this 代表着 onmousedown前面的變量 也就是this.div 也就是div
//div 是沒有move的方法的，所以我們這裏用箭頭函數來解決這個問題
//因爲箭頭函數是沒有this的，如果出現，他會向上找。
//現在this 代表的就是new操作符創建的實例對象
//9.調用移動方法 也就是監聽鼠標移動事件
this.move()
//10.調用停止方法 也就是監聽鼠標停止事件
this.end()
}
}
move() {
//移動方法
//在此方法中監聽鼠標移動
//在此作用域中，this 代表着 new操作符創建的實例對象
let that=this
//11.監聽鼠標移動
window.onmousemove=function(evt){
//這個作用域裏this 代表着 onmousemove前面的變量 也就是window
//window 是沒有new操作符創建的實例對象的屬性的，這裏我們可以換一種方式解決這個問題
//我們可以把上面作用域的this先存起來
//這樣that 就是d1
//12.得到div移動的距離，就是現在的鼠標座標減去移動前的鼠標座標
let moveX=evt.clientX-that.downX;
let moveY=evt.clientY-that.downY;
//13.改變div的left 就是div在移動前的位置加上移動的距離
that.div.style.left=that.downLeft+moveX+'px';
that.div.style.top=that.downTop+moveY+'px';
}
}
end() {
//停止方法
//在此方法中監聽鼠標擡起
//14.監聽鼠標擡起
window.onmouseup=function(){
//15.請鼠標移動，與鼠標擡起
window.onmousemove=null;
window.onmouseup=null;
}
}
random(){
//隨機顏色方法
//在此方法中隨機顏色
//在此作用域中，this代表着new操作符創建的實例對象
//15.隨機顏色
//方法一
// let r=Math.floor(Math.random()*256)
// let g=Math.floor(Math.random()*256)
// let b=Math.floor(Math.random()*256)
//設置顏色
// this.div.style.backgroundColor=`rgb(${r},${g},${b})`
//方法二
let r=Math.floor(Math.random()*0xFFFFFF)//0xFFFFFF 代表16進制數
//0xFFFFFF只是指定了隨機數的範圍，但是得到的隨機數，依然是以10進制的數展現的
r=r.toString(16)//轉化成16進制數
r=('000000'+r).slice(-6);//前面補0
//設置顏色
this.div.style.backgroundColor=`#${r}`
}
}
//調用
new Drag();
//如果要多個div的話。在控制檯，執行上面語句就可以了
</script>