jquery实现简单的拖拽效果实例兼容所有主流浏览器（优化篇)

相对于上一篇，优化了拖拽的效果js。代码：fun.js复制代码代码如下： _ MoveObj=null//全部变量，用来表示当前div z _ index=0；//z方向jquery。fn。my drag=function(){ _ Ismove=0；//是否移动1.移动_ MouseLeft=0；//左侧差异坐标_ MouseTop=0；//顶部差异坐标$(文档)。绑定(' mousemove '，函数(e){ if(_ IsMove==1){ $(_ moveObj)} .偏移量({top:e.pageY-_MouseLeft，left : e . Pagex-_ MouseTop })；} }).bind('mouseup '，function(){ _ IsMove=0；$(_MoveObj).移除类(“按下鼠标”)；});返回$(这个)。绑定(' mousedown '，函数(e){ _ IsMove=1；_ MoveObj=thisvar偏移量=$(这个).offset()；_ MouseLeft=e . PageX-偏移量。向左；_ MouseTop=e . PageY-偏移量。顶部；z _ index_ moveobj。风格。zindex=z _ index$(_MoveObj).添加CLaSS(' DownMouse ')；});} html代码： 复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头titledemo.htm/title元http-equiv=' content-type ' content=' text/HTML；charset=UTF-8 ' script src=' http : script/jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script script src=' http : my fun。js ' type=' text/JavaScript '/脚本样式type=' text/CSS ' .myDiv { background: # EAEAEA宽度： 100像素；高度： 100像素；border: 1px固体；光标：指针；文本对齐：中心；线高： 100像素；} .down mouse { cursor : movefilter : alpha(不透明度=80);-moz-opa市33600.5；opacity: 0.5背景-color : # ffffff；}/样式脚本类型=' text/JavaScript ' $(function(){ $(').my DiV ').myDraG()；//$('#myDiv2 ').myDraG()；})/脚本/头体div id='myDiv1' class='myDiv '拖拽1/div div id=' MyDiv 2 ' class=' MyDiv '拖拽2/div div id=' MyDiv 3 ' class=' MyDiv '拖拽3/div div id=' MyDiv 4 ' class=' MyDiv '拖拽4/div div id=' MyDiv 5 ' class=' MyDiv '拖拽5/div div id=' MyDiv 6 ' class=' MyDiv '拖拽6/div div id=' show '/div/body/html(9500 . 163.com)