スライダーコントロール
-
0 名前： れい ： 2007/02/11（日） 22:10 ID:elQ/0TlY sub-Q5
- どうもこんにちは。
javascriptでスライダーを作成しようとしています。
GaugeCtrlとMoveActionがあり、GaugeCtrlは画面のスライダーを動かし、
MoveActionは、赤いバーをドラッグ移動させるものです。
なぜ、GaugeCtrlのほうは動き、MoveActionは動かないのでしょうか？
onloadの関数のmoveObj.addAction1('panel_bar');を最後に持ってくると、
逆にMoveActionが動き、スライダーのほうが動かなくなります。
理由が分からないので、教えてもらおうと思い、登校します。
よろしくお願いします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<title>gauge</title>
<script type="text/javascript">
<!--
var gaugeCtrl;
var z_index;
var moveObj;
function GaugeCtrl(){
var target;
var context = this;
context.elemName;
var start = 0;
//
function addAction(elem){
var div = document.getElementById(elem);
div.onmousedown = startDrag;
document.onmouseup=endDrag;
//div.onmouseout=endDrag;
document.onmousemove=moveDrag;
}
this.addAction = addAction;
//
function startDrag(){
context.target = document.getElementById(this.value);
offsetX = event.offsetX;
start = offsetX;
//z_index++;
//context.target.style.zIndex = z_index;
return false;
}
this.startDrag = startDrag;
//
function moveDrag(){
if(!context.target){return false};
var x;
//x,y
x = event.clientX + document.body.scrollLeft;
if(x >= 145){
context.target.style.position='absolute';
context.target.style.left=132;
document.getElementById('mater').innerHTML = context.target.style.left;
endDrag();
return false;
}else if(50 >= x){
context.target.style.position='absolute';
context.target.style.left=52;
document.getElementById('mater').innerHTML = context.target.style.left;
endDrag();
return false;
}else{
x-=offsetX;
context.target.style.position='absolute';
context.target.style.left=x;
document.getElementById('mater').innerHTML = context.target.style.left;
return false;
};
}
this.moveDrag = moveDrag;
//
function endDrag(){
if(!context.target){return false};
if(context.target.style.left + 5 < 50){
alert();
}
context.target = null;
}
this.endDrag = endDrag;
}
//
function MoveAction(){
var context1 = this;
context1.target;
context1.elemName;
//
function addAction1(elem){
var div = document.getElementById(elem);
div.onmousedown = startDrag1;
document.onmouseup=endDrag1;
document.onmousemove=moveDrag1;
}
this.addAction1 = addAction1;
//
function startDrag1(){
context1.target = document.getElementById(this.value);
offsetX = event.offsetX;
offsetY = event.offsetY;
z_index++;
context1.target.style.zIndex = z_index;
return false;
}
this.startDrag1 = startDrag1;
//
function moveDrag1(){
if(!context1.target){return true}
var x;
var y;
//x,y
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
x-=offsetX;
y-=offsetY;
context1.target.style.position='absolute';
context1.target.style.left=x;
context1.target.style.top=y;
return false;
}
this.moveDrag1 = moveDrag1;
//
function endDrag1(){
context1.target = null;
}
this.endDrag1 = endDrag1;
//
function enableDragAction(){
addAction(context1.elemName);
}
this.enable = enableDragAction;
//
function unable(event){
var elem = event ? event.target : window.event.srcElement;
var bar = elem.parentNode;
context1.elemName = bar.id;
bar.onmousedown = "";
elem.onmouseout = enableDragAction;
}
this.unable = unable;
}
window.onload = function(){
var gaugeCtrl = new GaugeCtrl();
var moveObj = new MoveAction();
gaugeCtrl.addAction('gauge');
moveObj.addAction1('panel_bar');
gaugeCtrl.addAction('gauge2');
}
//-->
</script>
<style type="text/css">
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:900;
}
#panel_bar{
display:block;
background-color:red;
border-top:1px solid purple;
border-right:1px solid purple;
border-left:1px solid purple;
border-bottom:1px solid purple;
color:#ffffff;
cursor:pointer;
width:300;
height:20;
}
.memori{
background-image:url("../image/slider2.gif");
}
.pointer{
cursor:pointer;
}
#tbl{
}
</style>
</head>
<body>
<div id="panel">
<div id="panel_bar" value="panel" >
<p class="bar_content">Panel</p>
</div>
<div id="panel_body">
<table width="300" border="1" id="tbl">
<tbody>
<tr>
<td width="30">gauge</td>
<td width="100" class="memori">
<div><img class="pointer" id="gauge" value="gauge" src="../image/button_down.png"></div></td>
<td id="mater"></td>
</tr>
<tr>
<td width="30">gauge</td>
<td width="100" class="memori"><img class="pointer" id="gauge2" value="gauge2" src="../image/button_down.png"></td>
<td id="mater2">non</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
-
1 名前： れい ： 2007/02/11（日） 22:10 ID:elQ/0TlY sub-Q5
- すいません。追加で書きます。
現在、スライダーを動かすと、テーブルのオブジェクトから外れるためか、縦軸の位置がずれて、テーブルのセルが消えます。
このような問題は、どのように解決すればよいかも、アドバイスをお願いします。
-
2 名前： 匿名 ： 2007/02/11（日） 22:10 ID:zI2A4Ka1 sub-Cz
- 1 つしかない document.onmousedown/move/up を取り合ってるんだもの。最後に上書きしたオブジェクトが勝つに決まってるわな。
最近（と言っても数年経つが）のスクリプトは、そういう書き方をしない。attachEvent（IE Event Model）か addEventListener（DOM Events）を調べてみれ。あるいは根性を見せるなら、グローバルな配列を使って自力でイベントハンドラ管理しても良い（IE メモリリーク問題に絡んで、そうしている人もいる）。
ちなみに、微妙なクロスブラウザ処理があるけど、これが IE 専用であることは大丈夫？（Opera、Safari ならかろうじて動くかもしれないが）
なお、
> context1.target.style.left=x;
> context1.target.style.top=y;
> width:300;
> height:20;
こういうのを見たら瞬時に気持ち悪くなってほしい。CSS の left、top、width、height は 0 以外では単位が必須。従って style.left 等も文字列として格納されているわけであり、
> if(context.target.style.left + 5 < 50){
これなんか潜在的なバグになっている。
> x = event.clientX + document.body.scrollLeft;
> y = event.clientY + document.body.scrollTop;
そろそろ IE 互換モード用にスクリプトを作るのは止めて良いと思う。標準モードでは document.documentElement.scrollLeft 等から取得する。
と言うか、今回はドラッグ移動だけなんだから、クライアント領域での移動量さえ分かれば良い。つまりスクロール量を調べる必要はない。こういう所で互換性を落とさないようにしよう。
-
3 名前： 匿名 ： 2007/02/11（日） 22:10 ID:zI2A4Ka1 sub-Cz
- >>2
> > if(context.target.style.left + 5 < 50){
> これなんか潜在的なバグになっている。
ごめん、潜在的どころか明らかなバグだね。例えば left: 40; の場合（単位がないので文法ミスだが、それは脇に置く）、style.left は文字列だから、
・'40' + 5 == '405'
・'405' < 50 == false
になる。位置計算がもう滅茶苦茶。
-
4 名前： れい ： 2007/02/11（日） 22:10 ID:8DET73zi sub-OJ
- ありがとうございます。ご意見を踏まえて、とりあえず以下のように作ってみました。
＞今回はドラッグ移動だけなんだから、クライアント領域での移動量さえ分かれば良い。つまりスクロール量を調べる必要はない。こういう所で互換性を落とさないようにしよう。
は研究中です。
しかし、問題が２つあります。
１．最初にスライダを動かして、パネルを動かすと、スライダが置いてけぼりをくう。
２．スライダを動かすと、テーブルから外れるため、位置がずれる。
２を解決するために、最初に場所をcssで指定することはできますが、その場合、パネルを動かすと置いてけぼりを食います。
どのように解決すればいいのでしょうか。
よろしくお願いします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<title>gauge</title>
<script type="text/javascript">
<!--
var gaugeCtrl;
var z_index;
var moveObj;
var parentX = 0;
var parentY = 0;
function GaugeCtrl(){
var target;
var context = this;
context.elemName;
var start = 0;
var absLeft = 40;
context.offsetX;
//Action
function addAction(elem){
var div = document.getElementById(elem);
div.onmousedown = startDrag;
//div.attachEvent('onmousedown',startDrag);
}
this.addAction = addAction;
//
function startDrag(){
document.onmouseup=endDrag;
document.onmousemove=moveDrag;
context.target = document.getElementById(this.value);
context.offsetX = event.offsetX;
start = context.offsetX;
return false;
}
this.startDrag = startDrag;
//
function moveDrag(){
if(!context.target){return false};
var x;
//x,y
x = event.clientX + document.body.scrollLeft - parentX;
//x = document.documentElement.scrollLeft
if(x >= 160){
context.target.style.position='absolute';
context.target.style.left = 150 + parseInt(parentX) + 'px';
document.getElementById('mater').innerHTML = context.target.style.left;
endDrag();
return false;
}else if(absLeft >= x){
context.target.style.position='absolute';
context.target.style.left = absLeft + 'px';
document.getElementById('mater').innerHTML = context.target.style.left;
endDrag();
return false;
}else{
x-=context.offsetX;
context.target.style.position='absolute';
context.target.style.left=x;
document.getElementById('mater').innerHTML = x;
return false;
};
}
this.moveDrag = moveDrag;
//
function endDrag(){
document.onmouseup = null;
document.onmousemove = null;
if(!context.target){return false};
if(parseInt(context.target.style.left) < 40){
context.target.style.left = '40px';
}else if(parseInt(context.target.style.left) > 150){
context.target.style.left = '150px';
}
document.onmouseup = null;
document.onmousemove = null;
context.target = null;
}
this.endDrag = endDrag;
}
//
function MoveAction(){
var context1 = this;
context1.target;
context1.elemName;
context1.eveObj = new Object();
//
function addAction1(elem){
var div = document.getElementById(elem);
div.onmousedown = startDrag1;
}
this.addAction1 = addAction1;
//
function startDrag1(){
document.onmouseup = endDrag1;
document.onmousemove = moveDrag1;
context1.target = document.getElementById(this.value);
offsetX = event.offsetX;
offsetY = event.offsetY;
z_index++;
context1.target.style.zIndex = z_index;
return false;
}
this.startDrag1 = startDrag1;
//
function moveDrag1(){
if(!context1.target){return true}
var x;
var y;
//x,y
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
x-=offsetX;
y-=offsetY;
context1.target.style.position='absolute';
context1.target.style.left = x + 'px';
context1.target.style.top = y + 'px';
parentX = x;
parentY = y;
return false;
}
this.moveDrag1 = moveDrag1;
//
function endDrag1(){
context1.target = null;
document.onmouseup = null;
document.onmousemove = null;
}
this.endDrag1 = endDrag1;
//
function enableDragAction(){
addAction(context1.elemName);
}
this.enable = enableDragAction;
//
function unable(event){
var elem = event ? event.target : window.event.srcElement;
var bar = elem.parentNode;
context1.elemName = bar.id;
bar.onmousedown = "";
elem.onmouseout = enableDragAction;
}
this.unable = unable;
}
window.onload = function(){
var gaugeCtrl = new GaugeCtrl();
var moveObj = new MoveAction();
moveObj.addAction1('panel_bar');
gaugeCtrl.addAction('gauge');
gaugeCtrl.addAction('gauge2');
}
//-->
</script>
<style type="text/css">
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:900;
}
#panel_bar{
display:block;
background-color:red;
border-top:1px solid purple;
border-right:1px solid purple;
border-left:1px solid purple;
border-bottom:1px solid purple;
color:#ffffff;
cursor:pointer;
width:300;
height:20;
}
.memori{
background-image:url("../image/slider2.gif");
}
.pointer{
cursor:pointer;
}
#tbl{
border-collapse:collapse;
}
#gauge{
}
</style>
</head>
<body>
<div id="panel">
<div id="panel_bar" value="panel" >
<p class="bar_content">Panel</p>
</div>
<div id="panel_body">
<table width="300" border="1" id="tbl">
<tbody>
<tr>
<td width="40">gauge</td>
<td width="105" class="memori" id = "memori">
<img class="pointer" id="gauge" value="gauge" src="../image/pointer1.gif">
</td>
<td id="mater"></td>
</tr>
<tr>
<td width="30">gauge</td>
<td width="105" class="memori"><img class="pointer" id="gauge2" value="gauge2" src="../image/pointer1.gif"></td>
<td id="mater2">non</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
-
5 名前： れい ： 2007/02/11（日） 22:10 ID:8DET73zi sub-OJ
- こんばんは。あれから、パネル自体を最初からabsoluteにすることで、この問題は解決しました。
ありがとうございます。
