jQuery UI には、簡単にファイルをドラッグ可能にする「draggable」の機能があります。
例えば下記のように実装できます。
- jQuery
- 3.4.1
- jQuery UI
- 1.12.1
sample.html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$("li").draggable();
</script>
この機能には一つ落とし穴があります。それは <tr> を draggable にした場合で、Firefox を除くほとんどのブラウザで動作しません。
sample.html
<!-- ※※※ほとんどのブラウザで動かない! ※※※ -->
<table>
<tr>
<td>No.1</td><td>Apple</td><td>$1.35</td>
</tr>
<tr>
<td>No.2</td><td>Orange</td><td>$0.99</td>
</tr>
<tr>
<td>No.3</td><td>Grape</td><td>$2.47</td>
</tr>
</table>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$("tr").draggable();
</script>
下記のように 各 <tr> を <tbody> で囲んで指定しても同様にダメです。
sample.html
<!-- ※※※ ほとんどのブラウザで動かない! ※※※ -->
<table>
<tbody>
<tr>
<td>No.1</td><td>Apple</td><td>$1.35</td>
</tr>
</tbody>
...
</table>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$("tbody").draggable();
</script>
解決案としては、CSS で display を block に変えることで対応することが出来ます。例えば下記のような感じです。
style.css
table,
tbody {
display: block;
max-width: 480px;
}
tr {
display: flex;
}
td {
display: block;
}
/*
* 下記は、説明の便宜上 nth-child にしていますが、
* <td> に class を付与して指定した方がいいと思います
*/
td:nth-child(1) {
width: 70px;
}
td:nth-child(2) {
flex: 1;
}
td:nth-child(3) {
width: 100px;
}
でも、これだと width とかを指定する必要があって煩雑なんですよね。もうちょっと良い方法ないかなと思っています。