HTMLで作ったリストをドラッグアンドドロップ要素にする方法 HTMLのliタグで作ったリストをドラッグアンドドロップ要素にして、自在に並び替えできる方法について解説していきます。 HTML/CSS <body> <style> ul{ list-style: none; padding: 0; } li{ cursor:pointer; border:1px solid; } </style> <ul> <li id="test1" draggable="true">リスト1</li> <li id="test2" draggable="true">リスト2</li> <li id="test3" draggable="true">リスト3</li> </ul> <script src="script/test.js"></script> </body> HTMLにドラッグアンドドロップ
![JavaScriptとHTMLを使ってドラッグアンドドロップで要素を並び替える方法 - WEBCAMP MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/01fef33dfe4e94091742c1bf9eba06b725362906/height=288;version=1;width=512/https%3A%2F%2Fweb-camp.io%2Fmagazine%2Fwp-content%2Fuploads%2F2021%2F08%2F210912_html-draganddrop.png)