jquery实现拖动效果（代码+解释）
生活随笔
收集整理的這篇文章主要介紹了
jquery实现拖动效果（代码+解释）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.代碼效果
當鼠標點擊目標區(qū)域并且移動可以實現(xiàn)在網頁的窗口內移動，鼠標松開之后停止。
2.代碼及解釋
詳細解釋在代碼下部
<!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ā)生點擊事件時修改顏色為紅色$(this).css("background-color","red");//獲取div層的位置var offset = $(this).offset();//x為點擊的位置距離div的左側的距離var x = e.pageX - offset.left;//距離div的頂部的距離var y = e.pageY - offset.top;//綁定鼠標移動時間$(document).on("mousemove",function(en){$("#hid").css({left:en.pageX-x+"px",top:en.pageY-y+"px"});});}).mouseup(function(){//顏色恢復為原來顏色$(this).css("background-color","aqua");//取消事件$(document).off("mousemove");})});</script> </html>1.pageX和offset.left的的區(qū)別
pageX是鼠標的點擊位置距離頁面左邊的距離。
offset.left是鼠標點擊的div層的左側距離頁面左側的距離。
2.鼠標的移動事件綁定使用的是.on
這里使用.on綁定方便使用.off取消事件
總結
以上是生活随笔為你收集整理的jquery实现拖动效果（代码+解释）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第5周【项目3 - 括号的匹配】
- 下一篇： 金蝶EAS BOS 快捷键（待更新）