jQuery实现的简单拖拽功能示例

本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下：

<！doctype html><html lang="en"><head><meta charset="UTF-8"><title>拖拽</title><style>*{padding: 0;margin: 0;}div{width: 100px;height: 100px;background: #f00;cursor: pointer;position: absolute;left: 0;top: 0;}</style></head><body><div></div><script src="jquery.js"></script><script>$（function（）{//移动窗口的步骤//1、按下鼠标左键//2、移动鼠标$（"div"）.mousedown（function（e）{// e.pageXvar positionDiv = $（this）.offset（）;var distenceX = e.pageX - positionDiv.left;var distenceY = e.pageY - positionDiv.top;//alert（distenceX）// alert（positionDiv.left）;$（document）.mousemove（function（e）{var x = e.pageX - distenceX;var y = e.pageY - distenceY;if（x<0）{x=0;}else if（x>$（document）.width（）-$（"div"）.outerWidth（true））{x = $（document）.width（）-$（"div"）.outerWidth（true）;}if（y<0）{y=0;}else if（y>$（document）.height（）-$（"div"）.outerHeight（true））{y = $（document）.height（）-$（"div"）.outerHeight（true）;}$（"div"）.css（{"left":x+"px","top":y+"px"}）;}）;$（document）.mouseup（function（）{$（document）.off（"mousemove"）;}）;}）;}）;</script></body></html>

效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。