HTML5にはドラッグ&ドロップAPIが追加されました。これによってローカルファイルをドラッグ&ドロップでアップロードしたり、DOM同士をドラッグ&ドロップできるようになりました。 このAPIも素のままでは使いづらいところがあります。そこで今回は利便性を高めてくれるライブラリを紹介します。 Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about. Shopifyが開発しているドラッグ&ドロップライブラリです。DOM向けのライブラリで、ドラッグするオブジェクトごとにドロップできる場所を定義できます。スワップのようなオブジェクト同士を入れ替える機能もあります。 さらにドロップした後のソートであったり、ドロップできない場所に持っていくと震えるといったイベントの設定もできます。
![HTML5のドラッグ&ドロップを便利にしてくれるライブラリまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/187c73a033771349b28211a4c1299a705ed936a0/height=288;version=1;width=512/https%3A%2F%2Fblog.htmlhifive.com%2Fwp-content%2Fuploads%2F2017%2F12%2Fhtml5-dandd-4.gif%3Fw%3D440)