jQuery UIでドラッグ＆ドロップ
categories: javascript
jQuery 1.5 リリースされましたね。せっかくなんで1.5を使ってみます（特に1.5依存のことはやらないけど）。今回はjQuery UIを使ってドラッグ＆ドロップをやってみます。jQuery UI はjQueryの機能を拡張するプラグインの1つで、jQuery公式のUI関係のプラグインです。
今回のベース HTML / CSS はこんな感じ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="dragdrop.css" /> <script type="text/javascript" src="jquery-1.5.js"></script> <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script> <title>jQuery UI Draggable & Droppable</title> </head> <body> <div id="box"> </div> <div id="droparea"> </div> </body> </html>
@charset "utf-8";
#box {
width: 200px;
height: 200px;
background-color: blue;
}
#droparea {
width: 200px;
height: 200px;
border: 1px solid #000;
}
プラグインの使い方
まずはプラグインの使い方。使い方は簡単でjQuery本体のあとに使いたいプラグインを読み込むだけ。例えばjQuery UIを使う場合はこんな感じ。（今回はjQuery UI 1.8.9を使いますね。）
<script type="text/javascript" src="jquery-1.5.js"></script> <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
これでjQuery UIの全機能が使えます。jQuery UIはいろいろな機能を持っていて、その中の使いたい機能のプラグインだけを読み込むことも出来るけど、今回は全部入りのファイル（プラグイン）を使いますね。
ドラッグ＆ドロップ
id=”box”を好きな場所にドラッグ＆ドロップ出来るようにする。
$('#box').draggable();
たったこれだけ。簡単すぎる。
特定の場所のみにドロップ可
id=”box”をid=”droparea”のみにドラッグ＆ドロップ可能にする。
$('#box').draggable({
revert: 'invalid' /* 許可した場所以外にドロップしたら元の場所に戻す */
});
$('#droparea').droppable({
accept: '#box', /* #box のドロップを許可 */
tolerance: 'fit' /* エリアにきちんと収まった場合のみドロップ可 */
});
2011/02/03 21:05 | 1 Comment
Comments
Trackbacks
[…] 前回のドラッグ＆ドロップに続いて、今回もインタラクション機能を試してみます。 […]
Trackback URL