jquery拖拽效果完整实例（附demo源码下载）

本文实例讲述了jquery实现的拖拽效果。分享给大家供大家参考，具体如下：
运行效果截图如下：

点击此处查看在线演示效果。
具体代码如下：
html部分：

<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript" src="tuo.js"></script><script type="text/javascript"> $（function（）{$（"#box"）.tuoz（）; }）</script><style type="text/css"> *{margin:0px;padding:0px; } #box{height:100px;width:100px;background:#666666; } #box img{height:50px;width:50px;background:#666666; } #big{height:400px;width:300px;background:purple; }</style></head><body> <div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></div> <div id="big"></div></body></html>

jquery部分：

（function（）{ $.fn.extend（{tuoz:function（）{return this.each（function（）{var $this=$（this）;var ey="";var ex="";var mx="";var my="";var tx="";var ty="";var small_x="";var small_y="";var big_height="";var big_width="";var big_x="";var big_y="";var move="false";$this.mousedown（function（e）{ move="true"; mx=$this.offset（）.left; my=$this.offset（）.top; ex=e.clientX; ey=e.clientY; tx=ex-mx; ty=ey-my; small_x=$（"#big"）.offset（）.left; small_y=$（"#big"）.offset（）.top; big_height=$（"#big"）.height（）; big_width=$（"#big"）.width（）; big_x=small_x+big_width; big_y=small_y+big_height; }）$（document）.mousemove（function（e）{ex=e.clientX;ey=e.clientY;if（move=="true"）{$this.offset（{left:ex-tx,top:ey-ty}）;}}）$this.mouseup（function（e）{move=false;ex=e.clientX;ey=e.clientY;if（ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y）{$（"#big"）.append（$this.html（））;}$this.offset（{left:mx,top:my}）;}）}）}}）}）（jQuery）

完整实例代码点击此处本站下载。
更多关于jQuery特效与技巧相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。