- PR -

[JavaScript]範囲内でドラッグ&ドロップしたい

投稿者投稿内容
ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-01 19:34
お世話になります。
DIVのタグ部分をドラッグ&ドロップできるサンプルを改造して特定の範囲内だけ
ドラッグ&ドロップできる様にしたいと考えています。
<DIV>タグをネストすれば親DIV内だけの移動になるかと考えて書いてみたのですが
ドラッグ&ドロップ機能さえ動かなくなる始末で・・


<html>
<head>
<title>DragDrop Sample</title>
<script type="text/javascript">
<!--
var obj;
var offsetX;
var offsetY;

onload=function () {
if (document.all) {
objlist = document.all.tags("div");
//objlist = document.getElementsByTagName("div")
//objlist = document.all("map");
//objlist = document.all.tags("div");
//objlist = document.getElementById("map");
} else if (document.getElementsByTagName) {
objlist = document.getElementsByTagName("div");
} else {
return;
}
for (i = 0; i < objlist.length; i++) {
objlist[i].onmousedown = onMouseDown;
}
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
}
function onMouseDown(e) {
obj = this;
if (document.all) {
offsetX = event.offsetX + 2;
offsetY = event.offsetY + 2;
} else if (obj.getElementsByTagName) {
offsetX = e.pageX - parseInt(obj.style.left);
offsetY = e.pageY - parseInt(obj.style.top);
}
return false;
}
function onMouseMove(e) {
if (!obj) {
return true;
}
if (document.all) {
obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
obj.style.top = event.clientY - offsetY + document.body.scrollTop;
} else if (obj.getElementsByTagName) {
obj.style.left = e.pageX - offsetX;
obj.style.top = e.pageY - offsetY;
}
return false;
}
function onMouseUp(e) {
obj = null;
}

-->
</script>

</head>
<body>

<div style="position:absolute; top:100px; left:200px; width:200px; height:50px; padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">
Web Artisan Blog
</div>

</body>
</html>


http://www.res-system.com/weblog/media/1/dragdrop.html
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2006-08-01 22:11
引用:

ぽちさんの書き込み (2006-08-01 19:34) より:

ドラッグ&ドロップ機能さえ動かなくなる始末で・・


で、なんなん?
丸投げはやめようよ。せめて、自分が何をしたいのか、読んでいる人に何を頼みたいのかくらい書こうよ。

場所が場所なら、「見積書をお送りすればよろしいでしょうか」って、返ってくるよ。
小僧
ぬし
会議室デビュー日: 2002/08/14
投稿数: 526
投稿日時: 2006-08-01 23:08
大ヒント↓(というか、まんまという気もするんですが)
コード:
var rlimit = 500;
var llimit = 100;
var blimit = 500;
var ulimit = 100;
   .
   .
   .
function onMouseMove(e) {
    if (!obj) {
        return true;
    }
    if (document.all) {
        if(event.clientX < llimit || rlimit < event.clientX){
            return false;
        }
        if(event.clientY < ulimit || blimit < event.clientY){
            return false;
        }

        obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
        obj.style.top = event.clientY - offsetY + document.body.scrollTop;
    } else if (obj.getElementsByTagName) {
        if(e.pageX < llimit || rlimit < e.pageX){
            return false;
        }
        if(e.pageY < ulimit || blimit < e.pageY){
            return false;
        }
        obj.style.left = e.pageX - offsetX;
        obj.style.top = e.pageY - offsetY;
    }
    return false;
}




引用:

ドラッグ&ドロップ機能さえ動かなくなる始末で・・


IE6でもFireFoxでも動きましたよ。
試行錯誤していないですし、質問の仕方もおかしいですよね。
思わず書き込ませてしまうような上手い質問をしていただけ
ないかと・・・。

次回は質問の趣旨が分かるようにしてください。
でないと見積書を送りますよ。


ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-02 10:46
質問の仕方がまずかったようで申し訳ありません。

<DIV ID="oya">
<DIV ID="ko">
</DIV>
</DIV>

このようなHTMLがあった場合oyaのDIV要素の範囲内だけの移動になるんじゃないかと想定しています。
(oyaの幅と高さを固定したとして)
上記のように書いて動かしてみたところドラッグ&ドロップの機能が動作しなくなりました。
document.all.tags("div")でDIVがoyaかkoか解らないのが原因かなと考え
document.getElementByIdなどそれらしいものを試してみたのですが動作しません。
そもそもDIVをネストしたときの挙動の想定が間違っているでしょうか?

小僧
ぬし
会議室デビュー日: 2002/08/14
投稿数: 526
投稿日時: 2006-08-02 11:06
・・・動かない方のコードを載せるのがスジでしょ。
動かないコードのことまで人に考えさせるのは変でしょう。
ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-02 11:22
DIVの挙動の想定が間違っているのにサンプルに毛の生えたようなものを
乗せても見にくくなるかと思い躊躇してしまいました。失礼しました。
コメントアウトしてあるobjlist = document.all.tags("div")を有効にすると
親子両方いっしょに動きます。
現状のdocument.getElementById("mymap2")は動作しません。
objlistが値をとっていない為?正しい記述を調べております。


<html>
<head>
<title>DragDrop Sample</title>
<script type="text/javascript">

<!--
var obj;
var offsetX;
var offsetY;

onload=function () {
if (document.all) {
//objlist = document.all.tags("div");
objlist = document.getElementById("mymap2");

} else if (document.getElementsByTagName) {
objlist = document.getElementsByTagName("div");
} else {
return;
}
for (i = 0; i < objlist.length; i++) {
objlist[i].onmousedown = onMouseDown;
}
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
}
function onMouseDown(e) {
obj = this;
if (document.all) {
offsetX = event.offsetX + 2;
offsetY = event.offsetY + 2;
} else if (obj.getElementsByTagName) {
offsetX = e.pageX - parseInt(obj.style.left);
offsetY = e.pageY - parseInt(obj.style.top);
}
return false;
}
function onMouseMove(e) {
if (!obj) {
return true;
}
if (document.all) {
obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
obj.style.top = event.clientY - offsetY + document.body.scrollTop;
} else if (obj.getElementsByTagName) {
obj.style.left = e.pageX - offsetX;
obj.style.top = e.pageY - offsetY;
}
return false;
}
function onMouseUp(e) {
obj = null;
}

-->
</script>

</head>
<body>

<div id="mymap2" style="position:absolute; height: 2000px;width: 2000px;top:100px; left:200px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">

<div id="mymap" style="position:absolute; top:100px; left:200px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">
test
</div>
</div>

</body>
</html>
小僧
ぬし
会議室デビュー日: 2002/08/14
投稿数: 526
投稿日時: 2006-08-02 12:03
コード:
 objlist = document.getElementById("mymap2"); 


という部分がありますが、IDタグで特定の要素を取得した場合取得
したオブジェクトは配列ではなく、そのDIVタグの要素自体が返されます。
alertで取得した値を比べるとわかると思います。
コード:
if (document.all) {
   //objlist = document.all.tags("div");
   objlist = document.getElementById("mymap2");
   alert(objlist.id);



FireFoxで動かすとobjlistはHTMLDivElementと出てきますよ。
オブジェクトの配列では無い対象にループ処理しようとしている
ので動かないんだと思います。
DIVの親子関係の話の前に、まずはドラッグできるようにしてみてください。




mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-08-02 12:12
document.all

は基本的にIEのものなので(Operaにもあるけど)、使わないほうがいいでしょう。

document.getElementById

は、

document.getElement「s」ByTagName
foo.childNode「s」

などと名前を良く比較してみれば分かる通り、単一のものが返るという話ですね。
というか、そもそもIDは単一のものを表すのにつける属性なので、それを拾おうとして複数返ってこられても困りますが。

スキルアップ/キャリアアップ(JOB@IT)