[JS]ページ上のコンテンツを指定エリア内でレイアウト変更可能にするスクリプト

リストのアイテムやサイドバーの各コンテンツなど、ページ上のコンテンツをドラッグ&ドロップで移動し、それをクッキーに保存するjQueryのチュートリアルを紹介します。

jQuery: Customizable layout using drag and drop

[ad#ad-2]

• デモ
• 実装

デモ

デモでは簡単なリストのアイテムの順番変更からページのレイアウト変更まで、ドラッグ&ドロップで移動が可能です。
demo1からdemo3は、レイアウト変更までのステップという感じです。

demo 1: sortable list

リストのアイテムの昇降順の変更からはじまり、同カテゴリにある別のリストにもアイテムが移動可能です。

demo 2: Load items

クッキーへの保存と保存アイテムをロードし、レイアウトを再現します。

[ad#ad-2]

demo 3: Implementation in a real design

最終的には、ページ内の指定コンテンツが指定エリア内で移動が可能で、その内容をクッキーに保存します。
例：打ち出しエリアの3つのコンテンツ、サイドバーのコンテンツ

実装

外部ファイル

実装に使用するスクリプトは「jquery.js」「jQuery UI」「jQuery Cookie」の3つです。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

以下、demo 1を例に実装をご紹介。

HTML

demo 1の一番目、昇降順を入れ替えることができるリスト要素です。

<ul class="sortable-list">
	<li class="sortable-item">Sortable item A</li>
	<li class="sortable-item">Sortable item B</li>
	<li class="sortable-item">Sortable item C</li>
</ul>

JavaScript

sortable();を使用して、ソートが可能なようにします。

$('ul.sortable-list').sortable();

HTML

demo 2の二番目、異なるリスト要素間でも昇降順を入れ替えることができます。

<div class="column left first">
	<ul class="sortable-list">
		<li class="sortable-item">Sortable item A</li>
		<li class="sortable-item">Sortable item B</li>
	</ul>
</div>
<div class="column left">
	<ul class="sortable-list">
		<li class="sortable-item">Sortable item C</li>
		<li class="sortable-item">Sortable item D</li>
	</ul>
</div>
<div class="column left">
	<ul class="sortable-list">
		<li class="sortable-item">Sortable item E</li>
	</ul>
</div>

JavaScript

connectWithを使用してドラッグ&ドロップをリスト要素に定義します。

$('ul.sortable-list').sortable({
	connectWith: 'ul.sortable-list'
});

元記事では、上記のように少しずつ機能を追加し、最終的にページ内のコンテンツを指定した範囲内で移動可能なようにする方法を解説しています。