<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網-Resizable</title>
<style type="text/css">
body{
margin: 0px;padding: 50px;font-size: 14px;color: #333;
}
.panel{
width: 400px;height: 240px;
border:1px solid #ccc;position: relative;
}
.panel .title{
background-color: #eee;text-align: center;line-height: 30px;
border: 1px solid #fff;
font-weight: bold;
}
.ui-Resizable-r{
/* 右側控制元素樣式 */
position: absolute;right: 0px;top: 0px;
width: 10px;height: 100%;
background-color: green;
cursor: e-resize;
}
.ui-Resizable-b{
/* 底邊控制元素樣式 */
position: absolute;right: 0px;bottom: 0px;
width: 100%;height:10px ;
background-color: blue;
cursor: s-resize;
}
.ui-Resizable-rb{
/* 右下角控制元素樣式 */
position: absolute;right: 0px;bottom: 0px;
width: 20px;height:20px ;
background-color: red;
cursor: nw-resize;
}
</style>
</head>
<body>
<div class="panel" id="ui-Resizable">
<div class="title">Resizable Panel</div>
</div>
<script type="text/javascript">
// ctrl ：控制元素，panel ：面板 ， type 類型
var m_panel , m_ctrl , m_type ;
// move： 是否偵聽鼠標移動，
// m_start_x： 鼠標相對ctrl元素的left、right
// m_to_x： 鼠標的新位置
var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0 ;
// 面板最小尺寸
var m_min_w = 100,m_min_h = 40;
// 在控制元素中按下
function on_mousedown( e , panel ,ctrl , type ){
var e = e || window.event;
// 計算出鼠標頁面位置 和 當前元素位置的差 = 鼠標相對元素的位置
/* 任務一：計算鼠標按在控制元素上的x軸偏移*/
m_panel = panel;
m_ctrl = ctrl;
m_type = type;
// 開始處理移動事件
moving = setInterval(on_move,10);
}
// 頁面鼠標移動偵聽處理
document.onmousemove = function( e ){
var e = window.event || e;
/* 任務二：鼠標在頁面上移動時，把鼠標x軸的位置更新到全局變量m_to_x */
m_to_y = e.pageY;
}
// 鼠標移動處理
function on_move(){
if(moving){
/* 任務三：計算當鼠標移動中時，控制元素left的位置 */
var to_y = m_to_y - m_start_y;
/* 任務四：更新控制元素的lef t*/
}
}
// 鼠標彈起處理
document.onkeyup = document.onmouseup = function(e){
clearInterval(moving);
}
function Resizable( panelId ){
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);
// 為調整控制元素設置拖拽處理
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');
})
}
Resizable('ui-Resizable');
</script>
</script>
</body>
</html>
