jquery实现拖动效果（代码+解释）
生活随笔
收集整理的這篇文章主要介紹了
jquery实现拖动效果（代码+解释）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.代碼效果
當(dāng)鼠標(biāo)點(diǎn)擊目標(biāo)區(qū)域并且移動(dòng)可以實(shí)現(xiàn)在網(wǎng)頁的窗口內(nèi)移動(dòng)，鼠標(biāo)松開之后停止。
2.代碼及解釋
詳細(xì)解釋在代碼下部
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.5.0.min.js"></script><style>*{margin: 0px;padding: 0px;}#hid{width: 200px;height: 200px;background-color: aqua;cursor: move;position: absolute;}</style> </head> <body><div id="hid"></div> </body><script>$(function(){$("#hid").mousedown(function(e){//發(fā)生點(diǎn)擊事件時(shí)修改顏色為紅色$(this).css("background-color","red");//獲取div層的位置var offset = $(this).offset();//x為點(diǎn)擊的位置距離div的左側(cè)的距離var x = e.pageX - offset.left;//距離div的頂部的距離var y = e.pageY - offset.top;//綁定鼠標(biāo)移動(dòng)時(shí)間$(document).on("mousemove",function(en){$("#hid").css({left:en.pageX-x+"px",top:en.pageY-y+"px"});});}).mouseup(function(){//顏色恢復(fù)為原來顏色$(this).css("background-color","aqua");//取消事件$(document).off("mousemove");})});</script> </html>1.pageX和offset.left的的區(qū)別
pageX是鼠標(biāo)的點(diǎn)擊位置距離頁面左邊的距離。
offset.left是鼠標(biāo)點(diǎn)擊的div層的左側(cè)距離頁面左側(cè)的距離。
2.鼠標(biāo)的移動(dòng)事件綁定使用的是.on
這里使用.on綁定方便使用.off取消事件
總結(jié)
以上是生活随笔為你收集整理的jquery实现拖动效果（代码+解释）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第5周【项目3 - 括号的匹配】
- 下一篇： 金蝶EAS BOS 快捷键（待更新）