自由自在にドラッグすることができます。
今回は、オブジェクトを掴んで自由に動かす機能をjQueryで実装しました。
jQueryの公式サイトだけを見て実装することができたので、自分としては成長を感じています。只、このオブジェクトを掴んで動かす機能ですが実際のウェブサービスでの利用シーンが浮かばないので今一つ「覚えてやったぜ!」感がありません。まぁ、User Interfaceの使い方を覚えたというだけで十瓶な進歩かと。
コードは以下の通りです。
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<h3>自由自在にドラッグすることができます。</h3>
<div id="draggable" class="ui-widget-content">
<p class="draggText">自由に動きます</p>