リサイズできるテキストエリア

有名なライブラリだか使えば出来るみたいだけど
挑戦することに意義があり、レベルアップのために自分で書いてみた。
ライブラリだか良くわからんので、自分で書かざるを得ないだけだけど。

とりあえず自分で使う分にはそれっぽい動作はできた。
たぶんIEだけしか動作しない（IE6だけの可能性も）
マウスカーソルを変えるためだけにテーブルにしたから
結構面倒臭いことになって、いつもにも増して汚いソースになっとる。

createRWindow([ウィンドウタイトル],[y座標],[x座標],[幅],[縦の長さ]);

これで作成するオブジェクトが返ってくる。
生意気にも閉じるボタンも付けてみたｗ
※x座標とy座標が逆になってました。すまん。

document.body.appendChild(createRWindow('test1', 0, 0, 300, 200)); document.body.appendChild(createRWindow('test2', 20, 20, 400, 200)); document.body.appendChild(createRWindow('test3', 40, 40, 200, 200)); document.body.appendChild(createRWindow('test4', 60, 60, 100, 100)); document.body.appendChild(createRWindow('test5', 80, 80, 150, 150)); function createRWindow(win_title, pos_top, pos_left, size_w, size_h) { if(!/number/i.test(typeof z_index)) z_index = 1; if(!/number/i.test(typeof mouseup_flag)) mouseup_flag = 1; var _cleElm = function(tag_name, hash_prop, hash_style) { var elm = document.createElement(tag_name); for(var i in hash_prop) elm[i] = hash_prop[i]; for(i in hash_style) elm.style[i] = hash_style[i]; return elm; }; var _resizeWindow = function(t_elm, elm, t) { elm.onmousedown = function() { mouseup_flag = 0; var mx = parseFloat(event.x); var my = parseFloat(event.y); var wx = parseFloat(t_elm.offsetLeft); var wy = parseFloat(t_elm.offsetTop); var df_x = mx - parseFloat(wx); var df_y = my - parseFloat(wy); document.onmousemove = function() { if(mouseup_flag) return; var act_x = parseFloat(event.x); var act_y = parseFloat(event.y); var p_x = act_x - wx + 5; var p_y = act_y - wy + 5; event.returnValue = 0; if(t == 1) { t_elm.style.left = act_x - df_x; t_elm.style.top = act_y - df_y; } else if(t == 2) { t_elm.style.width = p_x; } else if(t == 3) { t_elm.style.height = p_y; } else if(t == 4) { t_elm.style.width = p_x; t_elm.style.height = p_y; } }; }; }; var e_table = _cleElm('table', '',{border:'1px solid #fff',width:size_w,height:size_h,background:'#000',position:'absolute',top:pos_top,left:pos_left}); var e_tbody = _cleElm('tbody'); var e_tr_1 = _cleElm('tr', '', {height:20,fontSize:'80%',cursor:'move'}); var e_td_1 = _cleElm('td', {colspan:2}, ''); var e_title = _cleElm('span', {innerText:win_title}, {position:'absolute',top:3,left:3,color:'#fff'}); var e_btn = _cleElm('button', {innerText:'x',onclick:function(){e_table.outerHTML=''}}, {width:'20',position:'absolute',right:'3',top:'3',background:'#222',color:'#fff'}); var e_tr_2 = _cleElm('tr'); var e_td_2 = _cleElm('td'); var e_div = _cleElm('div', '', {width:'100%',height:'100%'}); var e_area = _cleElm('textarea', '', {overflow:'auto',width:'100%',height:'100%',fontSize:'100%',marginLeft:10}); var e_td_3 = _cleElm('td', '', {width:10,cursor:'e-resize'}); var e_tr_3 = _cleElm('tr', '', {height:10}); var e_td_4 = _cleElm('td', '', {cursor:'n-resize'}); var e_td_5 = _cleElm('td', '', {cursor:'se-resize'}); _resizeWindow(e_table, e_td_1, 1); _resizeWindow(e_table, e_td_3, 2); _resizeWindow(e_table, e_td_4, 3); _resizeWindow(e_table, e_td_5, 4); e_table.onmousedown = function() {this.style.zIndex = ++ z_index}; e_table.onmouseup = function() {mouseup_flag = 1}; e_td_1.appendChild(e_title); e_td_1.appendChild(e_btn); e_tr_1.appendChild(e_td_1); e_tbody.appendChild(e_tr_1); e_div.appendChild(e_area); e_td_2.appendChild(e_div); e_tr_2.appendChild(e_td_2); e_tr_2.appendChild(e_td_3); e_tbody.appendChild(e_tr_2); e_tr_3.appendChild(e_td_4); e_tr_3.appendChild(e_td_5); e_tbody.appendChild(e_tr_3); e_table.appendChild(e_tbody); return e_table; };
環境によって微妙に値の調整が必要だろうとは思う。

08/12/11 22:30 修正

• 少し書き換えた。

08/12/21 14:00 更新

• 数箇所変更した。