JavaScript鼠標拖拽事件詳解

發(fā)布時間：2020-09-02 19:56:26 來源：腳本之家閱讀：158 作者：weixin_棉花糖欄目：web開發(fā)

本文實例為大家分享了js鼠標拖拽事件的詳細實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

圖片如下:

JavaScript鼠標拖拽事件詳解

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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

JavaScript鼠標拖拽事件詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽