jquery拖拽效果完整实例(附demo源码下载)

2019-11-20 10:48:25

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：基于jQuery实现文本框只能输入数字(小数、整数)

下一篇：基于javascript实现随机颜色变化效果