jquery拖拽效果实现方法

这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。

运行效果截图如下：

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

具体代码如下：

html部分：

 $(function(){  $("#box").tuoz(); }) *{  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; } 
 

登录后复制

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拖拽效果实现方法的详细内容，更多请关注【创想鸟】其它相关文章！