D&D Layer-Test

このレイヤーは、初期設定をしてあるので、初めから D&D ができます。

レイヤーをD&Dするには、 この上の first-layer とあるバーの部分をD&Dします。

このレイヤーは、初期設定に入れてないので、初めはD&Dできません。

しかし上の D&D start? とあるボタンを押すと、 onclickイベントで新しく D&D-Object が作られ、 このレイヤーをD&Dできるようになります。

このとき position:absolute; に強制的に変更されます。 top や left 値は自動で取得されますが、 もしかしたら少し位置がずれるかも知れません。

バーの部分をゆっくり動かして移動しなくても、 適当に掴んで、適当にポイっと捨てると、適当に配置されることでしょう。

バーの部分をダブルクリックすると、 一旦レイヤーが非表示になります。 この画面では再表示ボタンを付けてないので、個別に再表示させることはできません。

また、 画面上のどこでもいいので、ダブルクリックをするとスイッチが入ります。 そして、さらに続けてダブルクリックを押してみてください。 こうすると、D&Dレイヤーが全て非表示になります。

全て非表示になったあと、 再度ダブルクリックをすると、今度は全て再表示されます。 連続ダブルクリックのスイッチの受付時間は2.0秒です。

IE6, Opera7.0, FireFox1.0, で動作確認。

案の定、古いブラウザでは動作しないんでしょうね。 嘆かわしいことです。

・・・Opera6系は、いろいろダメですね。

ついでですが、D&D 状態になったとき、レイヤーの要素に D_D という class が勝手に付加されます。 このページでは、カーソルの形が変わるようにしてたりしてなかったりします。

この呼び出しボタンから呼び出すと、 大体、カーソルの真下20pxのとこに、レイヤーの左上隅が来るようにします。

例外として、ページの右端だったら、右端にフィットするように、出ます。たぶん。

IEのときは、スクロールバーの幅分を勝手に20pxとして補正しているので、 もしかしたら若干ずれるかもしれません。

あー、気付いてない人もいるかも知れないので一応断っておくと、 D&D は Drag and Drop (ドラッグ アンド ドロップ) の略ですよ。

レイヤーといってるのは、 単に独立した内容のブロック要素のことです。 特に何の規制は無いです。何でもいいです。

使い方は・・・ というか、まあ、使いたかったら、使いたいページで、次のように呼び出す。
<script type="text/javascript" src="DaD.js"></script>

あとはこのページのソースを見て、適当に煮るなり焼くなり、参考にしてください。

レイヤーのCSSも自分で適当に書いてください。

まあそんな感じで。