生活随笔
收集整理的這篇文章主要介紹了
javascript --- 原生的拖拽功能实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
準(zhǔn)備一個(gè)方塊:
<style>.drag{background-color:#aaf;position:absolute;}
</style>
<div class="drag" style="width:100px;height:100px;top:0;left:0"></div>
監(jiān)聽鼠標(biāo)的按住事件:
let dragDiv = document.getElementsByClassName("drag")[0];
let mousedown = (event)=>{alert("按住了");
}dragDiv.addEventListener("mousedown", mousedown,false);
按住事件(具體):
// 首先鼠標(biāo)得變成一個(gè)pointer狀態(tài),
// 然后監(jiān)聽移動(dòng)事件,讓方塊跟著鼠標(biāo)動(dòng)(style.left = 鼠標(biāo)距離左側(cè)得距離(event.clientX) - 鼠標(biāo)與方塊左邊距的距離(dragDiv.style.left))
// 重寫mousedown.
let mousedown = (event) => {let relaLeft = event.clientX- parseInt(dragDiv.style.left);let relaTop = event.clientY- parseInt(dragDiv.style.top);// 點(diǎn)擊時(shí)候的樣式dragDiv.style.cursor = "pointer";dragDiv.style.border = "1px solid red";// 監(jiān)聽鼠標(biāo)移動(dòng) (注意是監(jiān)聽document)document.onmousemove = (event) => {// 小方格跟著鼠標(biāo)移動(dòng)dragDiv.style.left = event.clientX - relaLeft + 'px' ;dragDiv.style.top = event.clientY - relaTop + 'px' ;// 小方格的邊界if( parseInt(dragDiv.style.left) <=0) {dragDiv.style.left = 0}if( parseInt(dragDiv.style.top) <= 0 ){ dragDiv.style.top = 0}if( parseInt(dragDiv.style.left) >= window.innerWidth - parseInt(dragDiv.style.width)) {dragDiv.style.left = window.innerWidth - parseInt(dragDiv.style.width) + 'px';}if( parseInt(dragDiv.style.top) >= window.innerHeight - parseInt(dragDiv.style.height)) {dragDiv.style.top = window.innerHeight - parseInt(dragDiv.style.height) + 'px';}}document.onmouseup = () => {dragDiv.style.border = "";document.onmouseup = null;document.onmousemove = null;}
}
參考 原生js實(shí)現(xiàn)拖拽功能
創(chuàng)作挑戰(zhàn)賽 新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔 為你收集整理的javascript --- 原生的拖拽功能实现 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
