jQuery UI で要素をドラッグしよう

はじめに

みなさん、要素をドラッグして移動したいと思ったことはありませんか？
これからjQuery UIを使って要素をドラッグしていきます。

jQuery UI

jQuery UIを使うためには読み込む必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

適当な場所からjQueryとjQuery UIを読み込みます。今回は Google Hosted Libraries から読み込むことにしました。
ご自身でダウンロードして読み込んでいたただいても構いません。

移動させたい

<div class="drag">
  <div class="drag-content">content1</div>
  <div class="drag-content">content2</div>
  <div class="drag-content">content3</div>
</div>

See the Pen Qiita-drag by Risuney (@risuney) on CodePen.

こうしても当然の如く要素の移動はできません。

jQuery UIを使う

$('.drag').sortable()

See the Pen Qiita-drag-2 by Risuney (@risuney) on CodePen.

jQuery UIを使って要素の並べ替えができました。

要素をまたいでで移動

ただ並び替えただけではつまらないですね。
親要素とその他の要素間をまたいで移動させましょう。

$('.drag').sortable({
  connectWith: '.drag',
  items: '.drag-content'
})

See the Pen Qiita-drag-3 by Risuney (@risuney) on CodePen.

要素をまたいで移動することができました。
connectWithでまたぐ要素、itemsでドラッグする要素を指定しています。

追記

コメントで報告してくださいました。
この機能はスマートフォンなどのタッチディスプレイでは非対応のようです。

まとめ

sortableで簡単に要素の移動ができる