jQuery UI Droppable
今回は、jQuery UIの「Droppable」について書きます。
Droppableは、簡単に言いますと、ドラッグ&ドロップのことです。
このように書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery ui</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div class="box">box</div> <div class="target_box">target_box</div> <style> .box{ width: 50px; height: 50px; background: red; margin-bottom: 30px; } .target_box{ width: 100px; height: 100px; background: green; } </style> <script> $(function(){ $('.box').draggable(); $('.target_box').droppable({ accept: '.box', drop: function(event,e){ alert('drop!'); } }); }); </script> </body> </html>
実行結果①
実行結果②
上のプログラムは、赤いボックス(box)を緑のボックス(target_box)にドラッグ&ドロップすると、アラートが表示されるものです。
こちらがjQueryの部分です。ここで、ドラッグ&ドロップについて書いています。
$(function(){ $('.box').draggable(); $('.target_box').droppable({ accept: '.box', drop: function(event,e){ alert('drop!'); } }); });
まず、ドラッグするほうに、draggable()を指定します。
そして、ドロップされるほうには、droppableを指定します。
「accept: '.box',」は、「.box」のみに反応するという設定です。別のモノをドロップしても反応しません。
(新しく作ったbox2だと、ドラッグ&ドロップしても、反応しません。)
最後の、
drop: function(event,e){ alert('drop!'); }
ここで、ドロップされた時の処理を書いています。今回は、アラートを表示するだけです。