关闭

jquery--拖拽效果

682人阅读 评论(0) 收藏 举报

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)



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:913431次
    • 积分:8411
    • 等级:
    • 排名:第2316名
    • 原创:185篇
    • 转载:101篇
    • 译文:0篇
    • 评论:61条
    文章分类
    最新评论