準備一個方塊:

<style>.drag{background-color:#aaf;position:absolute;} </style> <div class="drag" style="width:100px;height:100px;top:0;left:0"></div>

監聽鼠標的按住事件:

let dragDiv = document.getElementsByClassName("drag")[0]; let mousedown = (event)=>{alert("按住了"); }dragDiv.addEventListener("mousedown", mousedown,false);

按住事件(具體):

// 首先鼠標得變成一個pointer狀態, // 然后監聽移動事件,讓方塊跟著鼠標動(style.left = 鼠標距離左側得距離(event.clientX) - 鼠標與方塊左邊距的距離(dragDiv.style.left)) // 重寫mousedown. let mousedown = (event) => {let relaLeft = event.clientX- parseInt(dragDiv.style.left);let relaTop = event.clientY- parseInt(dragDiv.style.top);// 點擊時候的樣式dragDiv.style.cursor = "pointer";dragDiv.style.border = "1px solid red";// 監聽鼠標移動 (注意是監聽document)document.onmousemove = (event) => {// 小方格跟著鼠標移動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實現拖拽功能

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的javascript --- 原生的拖拽功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。