<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./jquery-1.12.4.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } #pic { width: 80px; height: 80px; position: absolute; left: 0; right: 0; } a { border: 1px solid red; } </style> </head> <body> <div id="pic">拖動我試試</div> <script type="text/javascript"> var drag = function(obj) { obj.bind('mousedown', start) function start(event) { if (event.button == 0) { //判斷是否點擊鼠標左鍵 /* * clientX和clientY代表鼠標當前的橫縱坐標 * offset()該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。 * bind()綁定事件，同樣unbind解綁定，此效果的實現最后必須要解綁定，否則鼠標松開后拖拽效果依然存在 * getX獲取當前鼠標橫坐標和對象離屏幕左側距離之差（也就是left）值， * getY和getX同樣道理，這兩個差值就是鼠標相對於對象的定位，因為拖拽后鼠標和拖拽對象的相對位置是不變的 */ gapX = event.clientX - obj.offset().left gapY = event.clientY - obj.offset().top //movemove事件必須綁定到$(document)上，鼠標移動是在整個屏幕上的 $(document).bind('mousemove', move) //此處的$(document)可以改為obj $(document).bind('mouseup', stop) } return false //阻止默認事件或冒泡 } function move(event) { obj.css({ left: event.clientX - gapX + 'px', top: event.clientY - gapY + 'px' }) return false //阻止默認事件或冒泡 } function stop() { //解綁定，這一步很必要，前面有解釋 $(document).unbind('mousemove', move) $(document).unbind('mouseup', stop) } } obj = $('#pic') drag(obj) //傳入的必須是jQuery對象，否則不能調用jQuery的自定義函數 </script> </body> </html>