jquery实现简单的拖拽效果实例兼容所有主流浏览器
发布时间:2020-12-14 23:28:23 所属栏目:资源 来源:网络整理
导读:最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop
最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mousedown",function(e){ _IsMove=1; var offset =$(this).offset(); _MouseLeft = e.pageX - offset.left; _MouseTop = e.pageY - offset.top; }).bind("mouseup",function(){ _IsMove=0; }).bind("mouSEOut",function(){ _IsMove=0; }); } html代码: 复制代码 代码如下: <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; } </style> <script type="text/javascript"> $(function(){ $("#myDiv").myDrag(); $("#myDiv2").myDrag(); }) </script> </head> <body> <div id="myDiv" class="myDiv">拖拽1</div> <div id="myDiv2" class="myDiv">拖拽2</div> </body> </html> 效果图1: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |