2007年05月17日

Javascript:エレメントの位置をコロコロと変える。

DOM element をスワップさせたり、最前部や最後部に移動させたりする関数群です。ま、簡単に出来ますし、大したコードでもないのですが、微妙に面白いw

・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え

のそれぞれの関数があります。

確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53
メイン環境じゃ無いので少ない・・・。



 ソースコード


function zbDom(){};
// 一つずつ上に移動
zbDom.stepUp = function (e){
  e = $(e);
  var p = e.parentNode;
  var b = e.previousSibling;
  if(!b || e == b || e == p.firstChild) return;
  p.removeChild(e);
  p.insertBefore(e, b);
}
// 一つずつ下に移動
zbDom.stepDown = function (e){
  e = $(e);
  var p = e.parentNode;
  var b = e.nextSibling;
  if(!b || e == b || e == p.lastChild) return;
  var c = b.nextSibling;
  if(!c || b == c || b == p.lastChild){
    p.removeChild(e);
    p.appendChild(e);
  }else{
    p.removeChild(e);
    p.insertBefore(e, c);
  }
}
// 指定要素の最前部に移動
zbDom.moveFirst = function (e, p){
  e = $(e);
  p = p ? $(p) : e.parentNode;
  var top = p.childNodes[0];
  if(top == e) return;
  e.parentNode.removeChild(e);
  p.insertBefore(e, top);
}
// 指定要素の最後部に移動
zbDom.moveLast = function (e, p){
  e = $(e);
  p = p ? $(p) : e.parentNode;
  e.parentNode.removeChild(e);
  p.appendChild(e);
}
// 要素の入れ替え
zbDom.swap = function (a, b){
  a = $(a);
  b = $(b);
  var pa = a.parentNode;
  var pb = b.parentNode;
  var c = document.createElement('span');
  pa.replaceChild(c, a);
  pb.replaceChild(a, b);
  pa.replaceChild(b, c);
}


 使い方

※ prototype.js の $ 関数を使っています。
※ prototype.js 入れ込みが面倒な方は以下のコードを追加すると動きます。

function $(id){
  if(typeof(id) == 'string') return document.getElementById(id);
  return id;
}

$(id) の id に element の id を入れると、getElementById で取得してくれます。string 以外を渡すと、そのまま返しますので、id は element かその id を入れて使います。
それ以外は対処してませんので悪しからず^^

一つずつ上に移動
zbDom.stepUp(element);
element が HTMLドキュメントを1つずつ上に上っていきます。
但し親要素の範囲を超えません。

一つずつ下に移動
zbDom.stepDown(element);
element が HTMLドキュメントを1つずつ下にくだっていきます。
但し親要素の範囲を超えません。

指定要素の最前部に移動
zbDom.moveFirst(element, p*);
element が指定要素(p)の最前部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。

指定要素の最後部に移動
zbDom.moveLast(element, p*);
element が指定要素(p)の最後部に移動します。
p は省略可能で、省略された場合は現在の親要素になります。

要素の入れ替え
zbDom.moveLast(elementA, elementB);
elementA と elementB を入れ替えます。

※ zbDom という関数のプロパティにワザワザ入れてるのは、これを継承するクラスを作成する予定だからw

 サンプル

サンプルはこちら

※ Aの文字を持つ span 要素が移動します。
※ Aを body の最後に移した場合、1つずつ上にあげようとすると、ブラウザによって要素の数が異なります。
posted by HiFa at 15:41 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。