リストなどの要素をドラッグ&ドロップで並び替えられるようにしたいことがあります。HTMLの要素の並び替えはSortableJSというJavaScriptのライブラリを使うと、とても簡単に実装できます。
一から要素を並び替えるWebアプリケーションを作ろうとしている方にも、製作中のWebアプリケーションの中で要素の並び替えができるようにしたいとお考えの方にもおすすめです。
このライブラリを使って並び替えのアニメーションを加えれば、直感的かつリッチなアプリケーションになること間違いなしです！
並び替えアニメーションのサンプル
並び替えれればそれでいい！という方はこちらがおすすめ
簡素でもいいからとにかく並び替えができるようにしたいという方はこちらがおすすめです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>並び替えアニメーション</title>
<style>
li {
cursor: default;
}
</style>
</head>
<body>
<ul id="items">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<li>アイテム4</li>
</ul>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el);
</script>
</body>
</html>少し詳しく説明します。
まず、CDNからSortableのスクリプトを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>並び替えアニメーション</title>
</head>
<body>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</body>
</html>並び替えたいli要素を囲んでいるul要素にid=”items”を付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>並び替えアニメーション</title>
<style>
li {
cursor: default;
}
</style>
</head>
<body>
<ul id="items">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<li>アイテム4</li>
</ul>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</body>
</html>JavaScriptからライブラリの設定を行います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>並び替えアニメーション</title>
<style>
li {
cursor: default;
}
</style>
</head>
<body>
<ul id="items">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<li>アイテム4</li>
</ul>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el);
</script>
</body>
</html>枠がついていてわかりやすい並べ替えアニメーション
こちらは操作がわかりやすい並び替えアニメーションを作りたいという方におすすめです。
掴める要素に枠がついていることや要素が移動するトランジションアニメーションがあることで、ドラッグ＆ドロップで操作できることが視覚的にわかりやすくなっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>並び替えアニメーション</title>
<style>
.list-group {
width: 30%;
margin: 100px auto;
}
.list-group-item {
border: 1px solid #aeaeae;
margin-bottom: -1px;
padding: 10px 15px;
background-color: #e2e2e2;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div id="items" class="list-group">
<div class="list-group-item">アイテム1</div>
<div class="list-group-item">アイテム2</div>
<div class="list-group-item">アイテム3</div>
<div class="list-group-item">アイテム4</div>
</div>
</div>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
animation: 150
});
</script>
</body>
</html>基本的な作り方は上で紹介したものと似ています。
- CDNを使ってSortableのスクリプトを読み込む
- 並べ替えしたい要素の親要素にid=”items”を付ける
- JavaScriptでSortableの設定をする
違う部分で注意が必要なのが、JavaScriptによるSortableの設定と並び替える要素にdiv要素を使っているという点です。
<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
animation: 150
});
</script>Sortable.create()というメソッドの第2引数にオプションとしてオブジェクトを設定しています。animationというプロパティで要素が並び変わる時のアニメーションの速度を変えられます。
このプロパティが設定されていなかったり、値が0だったりする時はアニメーションが行われません。
もっとすごい設定ができるSortableJS
1つ目に紹介した簡易的な並び替えの例では、li要素が並び替えられる要素でul要素がそれらのようのを囲む親要素になっていました。
2つ目のようにdiv要素を使って並び替えを実装することもできます。table要素の中身も並び替えることもできるようです。
JavaScriptで設定するオプションは、animationプロパティ以外の他にたくさん存在しています。SortableJSの詳しい設定方法はGitHubリポジトリに載っています。
コメント