jquery--拖拽效果

来源：互联网发布：led banner软件下载编辑：程序博客网时间：2024/05/22 00:14

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)