PbTimes 情報誌

jQuery ドラッグ＆ドロップで並び替え

2013/07/25

• Plugin
• jQuery

jQueryで簡単にテーブルをドラッグ＆ドロップで並び替える

概要

jQueryプラグイン、TableDnDを使用してテーブルの行をドラッグ＆ドロップで並び替える方法を紹介します。
今回使用するプラグインは、いろいろな機能がありますが、ここでは一番シンプルな並び替えを行う機能のみを紹介します。

プラグインをダウンロードするとサンプルのHTMLがありますので、その他の機能はそちらをご覧ください。

サンプル

設定方法

まずは、TableDnDからプラグインをダウンロードします。

tablednd.cssを読込みます。こちらはテーブルなどのデザインとなりますので、自由に変更ください。

<link rel="stylesheet" href="tablednd.css" type="text/css"/>

以下の2つのJavaScriptを読込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>

jQueryを以下のように記述します。

$(document).ready(function() {
    $("#table-1").tableDnD();
});

HTMLでは以下のようにテーブルを作成します。

<div class="tableDemo">
<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
    <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</div>

たったこれだけで、サンプルのようにドラッグ＆ドロップでテーブルを並び替えることができます。
その他にもいろいろ用意されていますので、お試しください。