<!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>