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

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

超文本标记语言部分：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头脚本类型=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http 3360 tuo。js '/script脚本类型=' text/JavaScript ' tuoz()；})/脚本样式类型=' text/CSS ' * { margin :0 px；padd :0 px } # box { height :100 px宽度宽度：100像素背景技术： # 666666;} # box img { height:50px宽度：50 px背景技术： # 666666;} # big { height:400px宽度宽度：300像素背景：紫色；}/style/head body div id=' box ' img src=' http :3358 www。百度。com/img/Baidu _ syl ogo 1。gif '/img/div div id=' big '/div/body/html jquery部分：

(function(){ $。fn。extend({ tuoz : function(){ return this。每个(函数(){ 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 . mouse down(函数(e){ move=' true '；mx=$this.offset().向左；my=$this.offset().顶部；ex=e . client xey=e . client ytx=ex-MX；ty=ey-my；small_x=$('#big ').偏移量()。向左；small_y=$('#big ').偏移量()。顶部；big_height=$('#big ').高度();big_width=$('#big ').宽度();大_x=小_ x大_宽度；大_y=小_ y大_高；}) $(文档)。鼠标移动(函数{ ex=e .客户x；ey=e . client iF(move==' true '){ $ this。偏移量({左侧： ex-tx，顶部： ey-ty })；} }) $this.mouseup(函数{ move=falseex=e . clientxey=e . clientyif(ex=small _ x ey=small _ y ex=big _ x ey=big _ y){ $(' # big ').追加($这个。html())；} $this.offset({left:mx，top : my })；})})}))}))}))(jQuery)完整实例代码点击此处本站下载。

更多关于jQuery特效与技巧相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。