实现简单的网页拖拽效果
2014-02-24 15:22
309 查看
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖曵原理实例</title> <style type="text/css"> #drag{ width:400px; height:300px; cursor:move; position:absolute; top:100px; left:100px; border:solid 1px #ccc; } h2{ color:red; height:80px; line-height:80px; margin:0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ /*--------------拖曳效果---------------- *原理:标记拖曳状态dragging ,坐标位置iX, iY * mousedown:fn(){dragging = true, 记录起始坐标位置,设置鼠标捕获} * mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值} * mouseup:fn(){dragging = false, 释放鼠标捕获,防止冒泡} */ var dragging = false; var iX, iY; $("#drag").mousedown(function(e) { dragging = true; iX = e.clientX - this.offsetLeft; iY = e.clientY - this.offsetTop; this.setCapture && this.setCapture(); return false; }); document.onmousemove = function(e) { if (dragging) { var e = e || window.event; var oX = e.clientX - iX; var oY = e.clientY - iY; $("#drag").css({"left":oX + "px", "top":oY + "px"}); return false; } }; $(document).mouseup(function(e) { dragging = false; $("#drag")[0].releaseCapture(); e.cancelBubble = true; }) }) </script> </head> <body> <div id="drag"> <h2>来拖动我啊</h2> </div> </body> </html>
相关文章推荐
- js+css简单实现网页换肤效果
- JavaScript实现的简单拖拽效果
- JavaScript实现的简单拖拽效果
- jQuery实现简单的网页换肤效果示例
- 简单网页元素拖拽实现
- 使用js实现的简单拖拽效果
- jquery实现简单的拖拽效果实例兼容所有主流浏览器
- jquery拖拽排序简单实现方法(效果增强版)
- jquery网页元素拖拽插件效果及实现
- js实现简单的网页换肤效果
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- 树莓派实现web控制GPIO教程(安装方法更简单,网页效果更好)
- 简单的jquery拖拽排序效果实现代码
- jquery简单实现网页层的展开与收缩效果
- Qt for Android QML实现缩放、拖拽、长按效果简单示例
- javascript实现PC网页里的拖拽效果
- js最简单的拖拽效果实现代码
- jquery网页元素拖拽插件效果及实现
- js+css简单实现网页换肤效果
- WEB前端开发学习----11. JQuery 实现简单的拖拽效果