HTML Drag and Drop APIをほんの数行のJSで動くようにしたサンプル。後はondropをつければいいだけ。Reactでも似たような感じで実装できるはず。

JS
HTML5

yuya_presto のブックマーク 2022/02/07 16:27

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/4715094047917087106/comment/yuya_presto" data-user-id="yuya_presto" data-entry-url="https://b.hatena.ne.jp/entry/s/www.therogerlab.com/sandbox/pages/how-to-reorder-table-rows-in-javascript?s=0ea4985d74a189e8b7b547976e7192ae.4122809346f6a15e41c9a43f6fcb5fd5" data-original-href="https://www.therogerlab.com/sandbox/pages/how-to-reorder-table-rows-in-javascript?s=0ea4985d74a189e8b7b547976e7192ae.4122809346f6a15e41c9a43f6fcb5fd5" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.therogerlab.com%2Fsandbox%2Fpages%2Fhow-to-reorder-table-rows-in-javascript%3Fs%3D0ea4985d74a189e8b7b547976e7192ae.4122809346f6a15e41c9a43f6fcb5fd5" data-user-icon="/users/yuya_presto/profile.png">TheRogerLAB | Reorder table rows using drag and drop in javascript</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/JS">JS</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/HTML5">HTML5</a>]</li></ul><br><p style="clear: left">HTML Drag and Drop APIをほんの数行のJSで動くようにしたサンプル。後はondropをつければいいだけ。Reactでも似たような感じで実装できるはず。</p><a class="datetime" href="https://b.hatena.ne.jp/yuya_presto/20220207#bookmark-4715094047917087106"><span class="datetime-body">2022/02/07 16:27</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！