gooドクター有料プランが1ヶ月間無料!

frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか?

具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか?

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

#f2 {
float:right;
width:80%;
background-color : #e0fef8;
}
</style>
</head>
<body>
<div id="f1">f1</div>
<div id="f2">f2</div>
</body>
</html>

gooドクター

A 回答 (2件)

コンテンツが多いと動きがぎこちなくなったりします。


特にIEは処理が遅いですから。

それと元々Netscape系に多い(IEでもある)マウスアップの感知タイミングの問題で、
一度クリックしないとマウスアップを感知しない状況が出てしまうケースはこの手のJavaScriptにはつきまといます。

あと、様々なケースに関しては何もテストしていませんので、コンテンツ次第でどうなるか・・・。

<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>
    • good
    • 1
この回答へのお礼

素早いご回答ありがとうございます。

>それと元々Netscape系に多い(IEでもある)マウスアップの感知タイミングの問題で、

時々くっ付いちゃうんですね。(IE,FF,Operaを試したら、Operaは再現せず)

ActionScript(Flash)で同じような経験があります。そのときは、rereaseOutsideってイベントでDrag = 0って感じで直りました。

お礼日時:2008/03/10 18:24

思いっきり面倒なことをやればできないことはないですが


苦労のわりに得るものがすくないのでお勧めできません。
とくにブラウザごとに処理がことなるのでかなり煩雑になりそうな
予感がします
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

gooドクター

人気Q&Aランキング