jQuery UI には、簡単にファイルをドラッグ可能にする「draggable」の機能があります。

例えば下記のように実装できます。

<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 を除くほとんどのブラウザで動作しません。

<!-- ※※※ほとんどのブラウザで動かない！ ※※※ -->
<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> で囲んで指定しても同様にダメです。

<!-- ※※※ ほとんどのブラウザで動かない！ ※※※ -->
<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 に変えることで対応することが出来ます。例えば下記のような感じです。

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 とかを指定する必要があって煩雑なんですよね。もうちょっと良い方法ないかなと思っています。