第15回 jQuery UI Draggableを使って付箋(sticky)を作ってみる – jQuery入門
2009 年 10 月 11 日 投稿者: naga3
デスクトップに仮想的に貼り付けられる付箋アプリを使っている人は多いと思います。今回はブラウザ上の自由な位置に貼り付けてドラッグできる付箋を作ってみましょう。jQuery UIのモジュールであるDraggableを使うと、簡単に要素をドラッグすることが可能となります。
付箋のデモ
sticky.htmlnewボタンを押すと新しい付箋作成、ダブルクリックで文章編集、ドラッグで移動ができます。ソースが欲しければ右クリックからどうぞ。
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">google.load("jqueryui", "1.7");</script>
<script type="text/javascript">
$(function() {
$('#new').click(function() {
$('<div class="sticky">ダブルクリック！</div>')
.appendTo('body')
.draggable()
.dblclick(function() {
$(this)
.wrapInner('<textarea></textarea>')
.find('textarea')
.focus()
.select()
.blur(function() {
$(this).parent().html($(this).val());
});
});
});
});
</script>
<style type="text/css">
.sticky {
width: 200px;
height: 50px;
background-color: #ffa;
cursor: pointer;
}
textarea {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<input id="new" type="button" value="new" />
</body>
</html>
ソースの解説
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">google.load("jqueryui", "1.7");</script>
jQuery 1.3系列の最新バージョンと、jQuery UI 1.7系列の最新バージョンをGoogleより読み込んでいます。
$('#new').click(function() {
newボタンをクリックしたときに、
$('<div class="sticky">ダブルクリック！</div>')
まず付箋をdiv要素としてつくります。
.appendTo('body')
付箋のdivをbodyの子要素として挿入します。
.draggable()
付箋のdivをドラッグ可能とします（この一行だけでドラッグ可能になります）。
.dblclick(function() {
付箋のdivに対し、ダブルクリックされたときのイベントを設定します。イベントの中身は以下の通り。
$(this)
.wrapInner('<textarea></textarea>')
付箋の子要素にtextareaを付けます。wrapInnerは対象の子要素を指定したhtmlで挟み込むことができるので、付箋のテキストを消さずにtextareaで挟み込むことができるのです。
.find('textarea')
findは指定した子要素を検索し、操作の対象を移動するメソッドです。これ以降はdivではなくその子要素のtextareaに対する操作となります。
.focus()
textareaにカーソルを移動します。
.select()
textareaの文章全体が選択状態になります。
.blur(function() {
$(this).parent().html($(this).val());
});
blurはフォーカスが外れたときのイベントを設定します。textarea以外の場所をクリックしたときなどにこのイベントが発生します。イベントの中身は、textareaの親要素である付箋のdiv要素の中身をtextareaの値にしています。これによってtextareaのタグを外し文章はそのまま残しておくことができます。
2009 年 12 月 12 日 1:06 PM
[...] 参考ページはコチラ↓ http://ponk.jp/?p=2441 [...]