ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

■ JQUERY SORTABLE

http://jqueryui.com/demos/sortable/

http://jqueryui.com/download ←ダウンロードはこちら

JS

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

HTML

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、＜li＞要素がドラッグ&ドロップで順番入れ替えできます。

入れ替え後のデータは data（PHP用） , data2（CSV形式） に入るのでそれをプログラムに渡すといいでしょう。

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});

意外に登場する機会が多いので関数として登録しておく

■ hidden属性を作成する make_hidden()

// make_hidden : hiddenを作成する : Version 1.1
function make_hidden( name, value, formname ){
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
	if (formname){ document.forms[formname].appendChild(q); }
    else{ document.forms[0].appendChild(q); }
}

使い方：引数は（ '名前' , '値', 'フォーム名' ）

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の＜form＞タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます

また作成した hidden 属性を削除するには以下の関数を使用します

■ hidden属性を削除する make_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}

デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい！という時があります。

・DOMオブジェクトの中身を確認したいときには以下のようにします。

Firefox限定ですが便利。

var serializer = new XMLSerializer();
alert( serializer.serializeToString( dom_obj ) );

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。（出力は「エラーコンソール」）

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかを確認したいときは

console.log( Object.getPrototypeOf( $("#test01") ) );
console.log( Object.getPrototypeOf( document.getElementById('test01') ) );

とします。 jQueryの場合は【jQuery】、DOMオブジェクトの場合は 【HTML.......】と表示されます。

ただ、そもそもオブジェクト以外の者を渡した場合場合にエラーとなりますので、

	if (Object.prototype.toString.call(my_obj)==='[object Object]'){ console.log(Object.getPrototypeOf( my_obj )); }

としてもいいです。

どうせなら groupメソッドを使って

jq_obj =  $("#test01");

console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。

・jQueryオブジェクトをダンプしたい場合は

http://goo.gl/rXUKI

が便利です。

・その他のオブジェクト（JSON等）、配列、連想配列などをダンプしたい場合は

JKL.Dumper が便利です↓

http://www.kawa.net/works/js/jkl/dumper.html

使い方（オブジェクト hoge の中身をダンプする）

<script type="text/javascript" src="jkl-dumper.js"></script> 

var hoge = [1,2,3,4,5];
alert( new JKL.Dumper().dump(hoge) );

便利！！！

◆ DOM Tool

http://goo.gl/qz5UKT

便利です。

htmlソースを入力して【Create DOM Statements】ボタンを押すと

DOM生成用のJavaScriptコードを吐いてくれます。

例：＜div id="text"＞＜/div＞というhtmlコードを JavaScript で実行したい。

HTML：

<div id="test"></div>

OUTPUT：

var div1=document.createElement('div');
div1.setAttribute('id','test');