jQuery UI の draggable と droppable を利用すると、HTML 要素をドラッグで移動させたり ドロップ時の動作を実装することができます。
今回は、draggable と droppable の 使用方法について、解説いたします。
( ドラッグ&ドロップの実装については、jQuery【 jQuery UI 】ドラッグ&ドロップで並べ替えができる sortable の使用方法もご参照下さい。)
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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 | ドラッグ後 ドロップエリア上にある間のみ、ドロップ可能なボックスにクラスを追加する |
jQuery UI の draggable と droppable の 使用方法について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.