jQuery【 jQuery UI】draggableとdroppableの使用方法

jQuery UI の draggable と droppable を利用すると、HTML 要素をドラッグで移動させたり ドロップ時の動作を実装することができます。
今回は、draggable と droppable の 使用方法について、解説いたします。
（ ドラッグ＆ドロップの実装については、jQuery【 jQuery UI 】ドラッグ＆ドロップで並べ替えができる sortable の使用方法もご参照下さい。）

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. draggable の使用方法

　
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>

▲目次へ戻る

　

2. draggable のオプション

　
draggable は、主に次のようなオプションがあります。

axis	移動方向を指定する x：水平方向 / y：垂直方向
connectToSortable	並び替えられるリストへ接続する
containment	移動範囲を指定する
handle	ドラッグ可能な要素を指定する
helper	移動用の複製を生成する
opacity	移動中のボックスを半透明にする
scroll	移動中のスクロールの可否を指定する
snap	特定の要素に吸着（スナップ）させる
snapMode	スナップ可能な範囲を指定する （内側 / 外側 / 内側及び外側）
snapTolerance	スナップする距離を指定する

▲目次へ戻る

　

3. droppable の使用方法

　
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>

▲目次へ戻る

　

4. droppable のオプション

　
droppable は、主に次のようなオプションがあります。

accept	ドロップ可能な要素を指定する
activeClass	ドロップエリア内でドラッグしている間のみ、ドロップ可能なボックスにクラスを追加する
addClass	ドロップ時に ドロップ可能なボックスにクラスを追加する
hoverClass	ドラッグ後 ドロップエリア上にある間のみ、ドロップ可能なボックスにクラスを追加する

▲目次へ戻る

5. まとめ

jQuery UI の draggable と droppable の 使用方法について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る