
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.05.15
jQuery UI の draggable と droppable を利用すると、HTML 要素をドラッグで移動させたり ドロップ時の動作を実装することができます。
今回は、draggable と droppable の 使用方法について紹介します。
( ドラッグ&ドロップの実装については、jQuery【 jQuery UI 】ドラッグ&ドロップで並べ替えができる sortable の使用方法もご参照下さい。)
1.draggable の使用方法
2.draggable のオプション
3.droppable の使用方法
4.droppable のオプション
draggable は、次のように記述して使用します。
$(“HTML 要素”).draggable();
実際に 上記の記述でドラッグ可能なボックスを作成すると、以下のようになります。
ドラッグで
移動できます
ソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function() { $("#wkBox").draggable(); }); //--> </script> <style> #wkBox { width: 150px; height: 70px; background-color:#CCC; } </style> <div id="wkBox"> <p>ドラッグで<br>移動できます</p> </div>
draggable は、主に次のようなオプションがあります。
axis | 移動方向を指定する x:水平方向 / y:垂直方向 |
---|---|
connectToSortable | 並び替えられるリストへ接続する |
containment | 移動範囲を指定する |
handle | ドラッグ可能な要素を指定する |
helper | 移動用の複製を生成する |
opacity | 移動中のボックスを半透明にする |
scroll | 移動中のスクロールの可否を指定する |
snap | 特定の要素に吸着(スナップ)させる |
snapMode | スナップ可能な範囲を指定する (内側 / 外側 / 内側及び外側) |
snapTolerance | スナップする距離を指定する |
droppable を使用すると、ドロップ時の動作を記述することができます。
下のピンクのボックスをドラッグ&ドロップでドロップエリアに移動させてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function() { $("#div1").draggable(); $("#div2").droppable({ //ドロップOKの要素を指定 accept :"#div1" , //ドロップ時の動作 drop : function(event , ui){ alert("ドロップされました!"); } }); }); //--> </script> <style> #div1 { width:70px; height:70px; background-color:pink; } #div2 { width:200px; height:100px; background-color:#CCC; } </style> <div style="display:inline-flex;"> <div id="div1"> </div> <div id="div2"> ドロップエリア </div> </div>
droppable は、主に次のようなオプションがあります。
accept | ドロップ可能な要素を指定する |
---|---|
activeClass | ドロップエリア内でドラッグしている間のみ、ドロップ可能なボックスにクラスを追加する |
addClass | ドロップ時に ドロップ可能なボックスにクラスを追加する |
hoverClass | ドラッグ後 ドロップエリア上にある間のみ、ドロップ可能なボックスにクラスを追加する |
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.