本文例項為大家分享了js滑鼠拖拽事件的詳細實現程式碼，供大家參考，具體內容如下

圖片如下:

css程式碼

<style>
 *{
 margin:0;
 padding:0;
 }
 #box{
 width: 200px;
 height: 200px;
 background: url("./img/aio.png") no-repeat;
 background-size: cover;
 position: absolute;/*定位元素 父級元素window就是初始包含塊*/
 top:0;
 left:0;
 }
</style>

html程式碼

<div id="box"></div>

js程式碼

<script>
 //獲取標籤
 var box=document.getElementById("box");
 var body=document.body;
 var x,y;//全域性作用域
 //滑鼠按下事件 0級
 box.onmousedown=function(e) {//傳入形參e
 var mx=e.clientX;//滑鼠距離瀏覽器左
 var my=e.clientY;//滑鼠距離瀏覽器上
 var bx=box.offsetLeft;//盒子距離瀏覽器左
 var by=box.offsetTop;//盒子距離瀏覽器上
 x=mx-bx;//實際盒子距離的瀏覽器左
 y=my-by;//實際盒子距離的瀏覽器上
 //滑鼠移動事件 0級
 body.onmousemove=function(e) {//拿到全域性x、y、
  //獲取當前滑鼠移動到的座標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";

 };
 //滑鼠彈起事件(鬆開)
 box.onmouseup=function(e) {
  body.onmousemove=null;//不做任何操作//dom0級事件解除事件繫結
  //獲取當前滑鼠移動到的座標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";
 }
 };
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。