jQuery お勉強

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>

  • この記事を書いた人
  • 最新記事
たーん

たーん

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

-jQuery, お勉強

Copyright© とある会社の情報システム部 , 2021 All Rights Reserved Powered by AFFINGER4.