用鼠标画出可移动的div

测试用例地址：http://jsfiddle.net/maplecumt/q78xZ/3/result/

这个测试用例的div移动出了点问题，因为是第一次使用jsfiddle网站，所以用的不是很熟悉，还希望高手指点。

具体的原理我就不多说了，直接贴代码。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Draw rectangle</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="jquery.ui.core.js" type="text/javascript"></script>
        <script src="jquery.ui.widget.js" type="text/javascript"></script>
        <script src="jquery.ui.mouse.js" type="text/javascript"></script>
        <script src="jquery.ui.draggable.js" type="text/javascript"></script>
        <link href="catch.css" rel="stylesheet" type="text/css";charset=gb2312/>
        <script src="catch.js" type="text/javascript";charset=gb2312></script>
        
        <!--[if gte IE 7]>
            <style type="text/css">
                
            </style>
        <![endif]-->
    </head>
    <body>
            <!--   header   -->
            <div id="header">
                <label>Draw!</label>
            </div>
            
            <!--   content   -->
            <div id="content">                
                
            </div>
            <!--   bottom   -->
            <div id="bottom">
            
            </div>
    </body>
</html>

css代码：

body 
{
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
}


#header
{
    width:150px;
    margin:0px auto;
    
}
#header label
{
    font-size:45px;
    font-weight:bolder;
}



#content
{
    width:90%;
    height:600px;
    margin:10px auto;
    border:1px solid blue;
}



.new_rect
{
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70); 
    
    background:#A8CAEC;
    border:1px solid #3399FF;
    position:fixed;
    float:left;
}

.new_rect:hover{
    cursor:move;
}

.mousedown{
    -webkit-box-shadow:5px 5px 5px black;
    -moz-box-shadow:5px 5px 5px black;
    box-shadow:5px 5px 5px black;
    z-index:999;
}

js代码：

//////////////////////////////////////////////////////////

$(function () {        
    //$("div[title=new_rect]").click(function(){alert("click");});
    //$(".new_rect").draggable();
    drow_rect("#content");
    
})

/////////////////////////////////////////////////////////
function drow_rect(the_id){//theid表示用作画布的层        
    
var num=1;
var x_down=0,y_down=0;
var new_width=0,new_height=0;
var x_original=0,y_original=0;
var original_flag=true,down_flag=false;
var x_point=0,y_point=0;
var append_string;

    
    
        var MouseDown=function(e){
            down_flag=true;
            x_down=e.pageX;
            y_down=e.pageY;//记录鼠标的当前坐标
            
            if(original_flag){//如果是第一次点击,把起始点的坐标记录到 x_original 和 y_original中
                x_original=e.pageX;
                y_original=e.pageY;
                original_flag=false;
            }
        };
        
        var MouseMove=function(e){
            if(down_flag){//鼠标有移动
                x_down=e.pageX;
                y_down=e.pageY;
                
                x_point=x_original;
                y_point=y_original;
                
                new_width=x_down-x_original;
                if(new_width<0){//鼠标向左运动
                    new_width=-new_width;
                    x_point=x_down;                
                }
                
                new_height=y_down-y_original;
                if(new_height<0){ //鼠标向右运动
                    new_height=-new_height;
                    y_point=y_down;                
                }
                
                $("div[name='"+num+"']").remove();//把前面的层删除，并在后面的代码中生成新的层
                
                append_string="<div class='new_rect' style='left:"+x_point+"px;top:"+y_point+"px;"+"width:"+new_width+"px;height:"
                                    +new_height+"px' name='"+num+"' title='第"+num+"个'></div>";
                $(the_id).append(append_string);    
            }
        }
        
        $(the_id).bind("mousedown",MouseDown);
        $(the_id).bind("mousemove",MouseMove);//事件绑定
        
        $(the_id).mouseup(function(e){//松开鼠标左键，初始化标志位        
            down_flag=false;
            original_flag=true;
            $("div[name='"+num+"']").draggable();
            
            $("div[name='"+num+"']").mousedown(function(){
                $(this).addClass("mousedown");//添加阴影
                $(the_id).unbind("mousedown",MouseDown);
                $(the_id).unbind("mousemove",MouseMove);//取消事件绑定
            });
            $("div[name='"+num+"']").mouseup(function(){
                $(this).removeClass("mousedown");//删除阴影
                $(the_id).bind("mousedown",MouseDown);
                $(the_id).bind("mousemove",MouseMove);//事件绑定
            });
            num++;
        });
    
}

上传一个实例图片：

posted @ 2012-09-06 09:04  maplecumt  阅读(1433)  评论(2)  编辑  收藏  举报