擬似フレームのサイズをマウスで変更したいです。以前「CSSで指定したwidthをマウスで変更したい」（http://oshiete1.goo.ne.jp/qa3849904.html）で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } f1 f2

【Javaxcript CSS】擬似フレームサイズをマウスで変更したい

解決済

質問者：kingfruits
質問日時：2008/12/29 16:40
回答数：1件

擬似フレームのサイズをマウスで変更したいです。

以前「CSSで指定したwidthをマウスで変更したい」
（http://oshiete1.goo.ne.jp/qa3849904.html）
で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。
これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？

<html>
<head>
<style type="text/css">
#f1 {
float:left;
width:20%;
overflow: auto;
background-color : #ffd2ff;
}

#f2 {
float:right;
width:80%;
background-color : #e0fef8;
}

#space {
float:left;
width:5px;
background-color : #ffffff;
cursor:E-resize;
}
</style>
</head>
<body>

<script>
window.onload = function(){
var Drag = 0, i = function(id){ return document.getElementById(id) };
i('space').onmousedown = function(){ Drag = 1; }
document.onmouseup = function(){ Drag = 0; }
document.onmousemove = function(e){
if(!Drag){ return false; }
var ev = window.event || e;
var W = document.body.offsetWidth || document.documentElement.offsetWidth;
var L = parseInt( ev.clientX/W *100, 10);
var R = 100 - L;
if(L >1 && R > 1){
i('f1').style.width = L + '%';
i('f2').style.width = R + '%';
}
}
}
</script>

<div id="f1">f1</div>
<div id="f2">
<div id="space"></div>
f2</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yuu_x
回答日時：2008/12/30 02:02

IE のドラッグアンドドロップモードに入ったときイベントがこなくなる模様。

加えて、ドラッグアンドドロップにはリークがあるため、せっかくなのでまとめて解除。
<body ondragstart="event.returnValue = false;">
cf.
http://support.microsoft.com/kb/900856/ja

または、
/*@cc_on@*/
/*@if(@_jscript_version > 5.5) document.attachEvent('ondragstart', function(e){ e.returnValue = false; } ); @*/

document.onmousedown, document.ondragstrat などのプロパティを使用する場合は、すでに登録された関数を削除しないように気をつけてください。それから、これらは標準プロパティではないので(Not part of specification.)その辺も使用時の考慮に入れておいたほうが良いと思います。
cf.
https://developer.mozilla.org/En/DOM/Element.onm …