[jQuery UI] ドロップを実装する（Droppable）

投稿日：2018年5月22日

jQueryUIでドロップを実装するサンプルです。

サンプルソース

例）jQuery UIを使ったドロップのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryUIドロップサンプル</title>
<style>
#d1,#d2,#d3{
  border:1px solid #999999;
  background-color:#ffffa0;
  width:100px;
  height:30px;
}
#tgt{
  background-color:#eeeeee;
  width:300px;
  height:100px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function(){
  //ドラッグする要素の設定
  $("#d1").draggable();
  $("#d2").draggable();
  $("#d3").draggable();

  //ドロップする要素の設定
  $("#tgt").droppable({
    drop: function(event, ui){
      var a = ui.draggable[0].innerText;
      alert(a + "がドロップされました。");
    }
  });
});
</script>
</head>
<body>
  <div id="d1">D1</div>
  <div id="d2">D2</div>
  <div id="d3">D3</div>
  <div id="tgt">ここにドロップできます。</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIドロップサンプル</title>

<style>

#d1,#d2,#d3{

border:1px solid #999999;

background-color:#ffffa0;

width:100px;

height:30px;

}

#tgt{

background-color:#eeeeee;

width:300px;

height:100px;

}

</style>

$(function(){

//ドラッグする要素の設定

$("#d1").draggable();

$("#d2").draggable();

$("#d3").draggable();

//ドロップする要素の設定

$("#tgt").droppable({

drop: function(event, ui){

var a = ui.draggable[0].innerText;

alert(a + "がドロップされました。");

}

});

</script>

</head>

<body>

<div id="tgt">ここにドロップできます。</div>

</body>

</html>

実行サンプル

↓ドラッグ＆ドロップできます。

ここにドロップできます。

解説

jQueryUI（Droppable）公式ページ ⇒ https://jqueryui.com/droppable/

執筆者：とら