可调节大小的面板

代码如下：需要在熟练，代码可以进行简化。
把控制条的颜色去掉就可以了。

<!-- 可调节大小面板 -->
.panel{
position:relative;
left:100px;
width:300px;
height:200px;
border:1px solid #ccc;
}
.title{
background-color:#eee;
text-align:center;
line-height:30px;
border:1px solid #fff;
font-weight:bold;
}
.ui-Resizable-r{
position:absolute;
right:0;
top:0;
width:10px;
height:100%;
background-color:yellow;
cursor:e-resize;
}
.ui-Resizable-b{
position:absolute;
bottom:0;
right:0;
width:100%;
height:10px;
background-color:blue;
cursor:s-resize;
}
.ui-Resizable-rb{
position:absolute;
bottom:0;
right:0;
width:10px;
height:10px;
background-color:red;
cursor:nw-resize;
}
<div class="panel" id="panelDiv">
<div class="title">Resizable Panel</div>
<div class="ui-Resizable-r"></div>
<div class="ui-Resizable-b"></div>
<div class="ui-Resizable-rb"></div>
</div>
<script type="text/javascript">
window.onload=function(){//页面加载完成后执行这段代码，否则浏览器会先执行JS代码，由于页面还没有加载完成通过getElementById无法找到指定id的元素，所以执行操作会无效。也可以使用JQuery的方法。
	var arr=[['id','名称','血量','伤害'],['1','gareen','340','58'],['2','teemo','320','56'],['3','annie','380','38'],['4','deadbo','400','90']];
	var table=document.createElement("table");
	for(var i=0;i<arr.length;i++){
		var tr=document.createElement("tr");
		for(var j=0;j<arr[i].length;j++){
			var td=document.createElement("td");
			var text=document.createTextNode(arr[i][j]);
		    td.appendChild(text);
			tr.appendChild(td);
		}
		table.appendChild(tr);
	}
	
	var showtable=document.getElementById("showtable");
	showtable.appendChild(table);
	//document.getElementsByTagName("body")[0].appendChild(table);这种方法也可以将表格添加到body元素当前的位置
	//可调节大小控制面板，简单原理与鼠标拖拽相同，对控制条进行拖拽，条件面板大小 
	var r_control=document.getElementsByClassName("ui-Resizable-r")[0];
	var b_control=document.getElementsByClassName("ui-Resizable-b")[0];
	var rb_control=document.getElementsByClassName("ui-Resizable-rb")[0];
	var panel=document.getElementById("panelDiv");
	var moveTop=0;
	var moveLeft=0;
	var isDrop=false;
	var top=0;
	var left=0;
	var minWidth=100;
	var minHeight=60;
	var mycontrol,myname;
	function mouseDown(e,control,name){
		var e=e||window.event;
		moveTop=e.pageY-control.offsetTop;
		moveLeft=e.pageX-control.offsetLeft;
	    mycontrol=control;
	    myname=name;
		isDrop=true; 
		}
	document.onmousemove=function(e){ 
		if(isDrop===true){
			var e=e||window.event;
			top=e.pageY-moveTop;
			left=e.pageX-moveLeft;
			top=Math.max(top,minHeight);
			left=Math.max(left,minWidth);
    switch(myname){
      case 'r': mycontrol.style.left=left+"px";
      panel.style.width=left+10+"px";
        break;
      case 'b':mycontrol.style.top=top+"px";
      panel.style.height=top+10+"px";
        break;
      case 'rb': mycontrol.style.left=left+"px";
        mycontrol.style.top=top+"px";
        panel.style.width=left+10+"px";
        panel.style.height=top+10+"px";
        break;
    }
	}
	}
	r_control.onmousedown=function(e){
		var e=e||window.event;
		mouseDown(e,r_control,"r"); 
	}
    b_control.onmousedown=function(e){
		   mouseDown(e,b_control,"b");
		 }
	rb_control.onmousedown=function(e){
		   mouseDown(e,rb_control,"rb");
		 }
	document.onmouseup=function(){
		isDrop=false;//设置为不可移动标志
		//清除上次移动时更改的left或者top值使其定位的值初始化会紧贴面板，否则会定位到上次的位置不随着面板移动
		r_control.style.left="";
		b_control.style.top="";
		rb_control.style.left="";
		rb_control.style.top="";
	} 
};
</script>

笔记：
改写成 Jquery的插件。这样调用就行了 $(’#div’).resizeable();记录别人的代码还没有进行练习，先记录下来：

$.fn.resizeable = function(){
 $(this).each(function(){
   Resizable( $(this).attr('id') )
})
}
//  设置某个面板支持调整大小
function Resizable(panelId) {
    if (!window.__resizable_var) {
        with (window) {
            //  ctrl ：控制元素，panel ：面板 ， type 类型
            m_panel = 1, m_ctrl = 1 , m_type = 1
            //  move：       是否侦听鼠标移动， 
            //  m_start_x：  鼠标相对ctrl元素的left、right 
            //  m_to_x： 鼠标的新位置
            moving = 0 , m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0;
            //  面板最小尺寸
            m_min_w = 100, m_min_h = 40;
        }
    }
    var panel = document.getElementById(panelId);
    //  插入调整控制元素
    var r = document.createElement("div");
    var b = document.createElement("div");
    var rb = document.createElement("div");
    r.class = r.className = 'ui-Resizable-r  ui-Resizable-ctrl';
    b.class = b.className = 'ui-Resizable-b  ui-Resizable-ctrl';
    rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
    panel.appendChild(r);
    panel.appendChild(b);
    panel.appendChild(rb);
    //  鼠标移动处理
    function on_move() {
        if (moving) {
            //  计算最小的 left 和 top （使panel的新大小不能小于自身的位置）
            var min_left = 0
            var min_top = 0
            var to_x = Math.max(min_left + m_min_w, m_to_x - m_start_x);
            var to_y = Math.max(min_top + m_min_h, m_to_y - m_start_y);
            //  元素的新位置 = 鼠标新位置 - 鼠标相对元素的位置s
            switch (m_type) {
                case 'r' :
                    m_ctrl.style.left = to_x + "px";
                    m_panel.style.width = to_x + 10 + 'px';
                    break;
                case 'b' :
                    m_ctrl.style.top = to_y + "px";
                    m_panel.style.height = to_y + 10 + 'px';
                    break;
                case 'rb' :
                    m_ctrl.style.left = to_x + "px";
                    m_ctrl.style.top = to_y + "px";
                    m_panel.style.width = to_x + 20 + 'px';
                    m_panel.style.height = to_y + 20 + 'px';
                    break;
            }
        }
    }
    //   在控制元素中按下
    function on_mousedown(e, panel, ctrl, type) {
        var e = e || window.event;
        //  计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
        m_start_x = e.pageX - ctrl.offsetLeft;
        m_start_y = e.pageY - ctrl.offsetTop;
        m_panel = panel;
        m_ctrl = ctrl;
        m_type = type;
        //  开始处理移动事件
        moving = setInterval(on_move, 10);
    }
    //  为调整控制元素设置拖拽处理
    r.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, r, 'r');
    })
    b.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, b, 'b');
    })
    rb.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, rb, 'rb');
    });
    if (!window.__resizable_var) {
        //  页面鼠标移动侦听处理
        document.addEventListener('mousemove', function (e) {
            var e = window.event || e;
            m_to_x = e.pageX;
            m_to_y = e.pageY;
        })
        //  鼠标弹起处理
        document.addEventListener('mouseup', function (e) {
            clearInterval(moving);
            var cls = document.getElementsByClassName('ui-Resizable-ctrl');
            for (var i = 0; i < cls.length; i++) {
                cls[i].style.left = '';
                cls[i].style.top = '';
            }
  
        })
        window.__resizable_var = true;
    }
}