もう2～3年前のことになるのですが、iGoogleのようなDraggableなUIを実装して欲しいと言われたことがありました。
当時からjQuery・Prototype.jsなどはありましたし、ライブラリを使用して同様のUIを実装しているところも見かけましたので、それほど難しいことではないと思い受注したのですが、その後「ライブラリの使用はポリシー違反」という事実が発覚し、「ライブラリ無しでDraggableを実装」となってしまったのです。

右も左も分からない中、四苦八苦し、ライブラリを使用せず、何とか実用に耐えるものを仕上げることができましたが、今より未熟だった当時を考えると、奇跡だったんじゃないかとｗなんとかなるものですねぇ…

案件が終わった後も、活用できるように改良を重ね、iSoopleというiGoogleの劣化パクりサイトを作成しました。
自分のために作ったサイトでしたが、お使いの方もいらっしゃるようで、大変有り難いことです。

さて。前置きが長くなりましたが、本記事ではこのJavaScriptを公開いたします。
jQueryなどのライブラリを企業が率先して採用している昨今、必要になる機会は無いかもしれませんが、折角ブログ作ったし、ということで。

ソース

HTML

<div id="dragWrap">
	<ul class="col">
		<li class="blank">&nbsp;</li>
		<li class="itemBox">ボックス1</li>
		<li class="itemBox">ボックス2</li>
		<li class="itemBox">ボックス3</li>
	</ul>
	<ul class="col">
		<li class="blank">&nbsp;</li>
		<li class="itemBox">ボックス4</li>
		<li class="itemBox">ボックス5</li>
		<li class="itemBox">ボックス6</li>
	</ul>
	<ul class="col">
		<li class="blank">&nbsp;</li>
		<li class="itemBox">ボックス7</li>
		<li class="itemBox">ボックス8</li>
		<li class="itemBox">ボックス9</li>
	</ul>
</div>

CSS

#dragWrap { overflow: auto; }
#dragWrap .col {
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
}
#dragWrap li {
	list-style-type: none;
	display: block;
	margin: 10px 0 0 0;
	padding: 0;
	width: 100px;
	height: 50px;
}
#dragWrap .itemBox {
	background: #F0F0F0;
	cursor: move;
}
#dragWrap .reserver {
	background: #CCCCCC;
}
#dragWrap .blank {
	height: 1px;
	overflow: hidden;
	background: none;
}

Javascript

<script type="text/javascript" src="/file/demo/draggable.js"></script>
<script type="text/javascript">
new draggable({
	parent: 'dragWrap', //ドラッグ要素を内包する親要素のID
	item: { tag: 'li', css: 'itemBox' }, //ドラッグ要素のタグ名とクラス名
	handle: { tag: 'li', css: 'itemBox' }, //ドラッグできる要素のタグ名とクラス名
	except: { tag: 'li', css: 'blank' }, //ドラッグ除外要素のタグ名とクラス名
	reserve: 'reserver', //ドロップ箇所に表示される要素のクラス名
	dropped: function(){ return false; } //ドロップ完了時に実行
});
</script>

※bodyの閉じタグ前に挿入してください。

ライセンスはよく分からないので、とりあえずMITにしておきした。
お気づきの点があればどんどんツッコんでください。

よろしくお願いします。