jQuery オブジェクトを掴んで(ドラッグして)自由に動かす


自由自在にドラッグすることができます。

自由に動きます

今回は、オブジェクトを掴んで自由に動かす機能を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>

投稿者: たーん

初めまして、たーんです。 ウェブサイトを御覧いただき有難うございます。 お仕事では多店舗運営の情報システム周りをやっています。 詳しいプロフィールはこちらを御覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です