jquery实现简单的拖拽效果,兼容所有浏览器(二)
2013-06-21 17:31
946 查看
相对于上一篇,优化了拖拽的效果。
js代码:fun.js
html代码:
效果图1: 效果图2:
js代码:fun.js
_MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if(_IsMove==1){ $(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mouseup",function(){ _IsMove=0; $(_MoveObj).removeClass("downMouse"); }); return $(this).bind("mousedown",function(e){ _IsMove=1; _MoveObj = this; var offset =$(this).offset(); _MouseLeft = e.pageX - offset.left; _MouseTop = e.pageY - offset.top; z_index++; _MoveObj.style.zIndex=z_index; $(_MoveObj).addClass("downMouse"); }); }
html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>demo.htm</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="myFun.js" type="text/javascript"></script> <style type="text/css"> .myDiv{ background:#EAEAEA; width: 100px; height: 100px; border: 1px solid; cursor: pointer; text-align: center; line-height: 100px; } .downMouse{ cursor:move; filter:alpha(Opacity=80); -moz-opacity:0.5; opacity: 0.5; background-color:#ffffff; } </style> <script type="text/javascript"> $(function(){ $(".myDiv").myDrag(); //$("#myDiv2").myDrag(); }) </script> </head> <body> <div id="myDiv1" class="myDiv">拖拽1</div> <div id="myDiv2" class="myDiv">拖拽2</div> <div id="myDiv3" class="myDiv">拖拽3</div> <div id="myDiv4" class="myDiv">拖拽4</div> <div id="myDiv5" class="myDiv">拖拽5</div> <div id="myDiv6" class="myDiv">拖拽6</div> <div id="show"></div> </body> </html>
效果图1: 效果图2:
相关文章推荐
- jquery实现简单的拖拽效果,兼容所有浏览器(一)
- jquery实现简单的拖拽效果实例兼容所有主流浏览器
- jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
- jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
- jquery实现简单的拖拽效果实例兼容所有主流浏览器
- 简单几步原生javascript实现元素拖拽功能兼容所有浏览器
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
- jQuery+css实现的时钟效果(兼容各浏览器)
- 简单的jquery拖拽排序效果实现代码
- 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
- 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
- jQuery+css实现的时钟效果(兼容各浏览器)
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
- 封装的一个JS拖拽效果,兼容所有主流浏览器
- 纯JS(JavaScript)实现拖拽效果,兼容各大浏览器
- 巧用隐藏和负边距实现兼容所有浏览器的ul和li并列效果
- Jquery+CSS完美实现二级下拉菜单(兼容所有浏览器)
- 简单的jquery拖拽排序效果实现代码