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

最近发现网网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数jquery。代码：fun.js复制代码代码如下： jquery。fn。my drag=function(){ _ Ismove=0；_ MouseLeft=0；_ MouseTop=0；返回$(这个)。绑定(' mousemove '，函数(e){ if(_ IsMove==1){ $(this)} .偏移量({top:e.pageY-_MouseLeft，left : e . Pagex-_ MouseTop })；} }).绑定(' mousedown '，函数(e){ _ IsMove=1；定义变量偏移量=$(这个).offset()；_ MouseLeft=e . PageX-偏移量。向左；_ MouseTop=e . PageY-偏移量。顶部；}).bind('mouseup '，function(){ _ IsMove=0；}).bind('mouseout '，function(){ _ IsMove=0；});} html代码：复制代码代码如下： 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像素；}/样式脚本类型=' text/JavaScript ' $(function(){ $(' # MyDiv ')).myDraG()；$('#myDiv2 ').myDraG()；})/脚本/头体div id='myDiv' class='myDiv '拖拽1/div div id=' MyDiv 2 ' class=' MyDiv '拖拽2/div /body /html效果图1:

效果图2: