ポンクソフト

jQuery UI Draggableを使って付箋(sticky)を作ってみる - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

付箋

デスクトップに仮想的に貼り付けられる付箋アプリを使っている人は多いと思います。今回はブラウザ上の自由な位置に貼り付けてドラッグできる付箋を作ってみましょう。jQuery UIのモジュールであるDraggableを使うと、簡単に要素をドラッグすることが可能となります。

実行結果

付箋のソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<title>付箋</title>
<script>
$(function() {
  $('#new').click(function() {
    $('<div class="sticky">Drag & Double Click!</div>')
      .appendTo('body')
      .draggable()
      .dblclick(function() {
        $(this).wrapInner('<textarea></textarea>')
          .find('textarea')
          .focus()
          .select()
          .blur(function() {
            $(this).parent().html($(this).val());
          });
      });
  });
});
</script>
<style>
.sticky {
  width: 250px;
  height: 50px;
  background-color: #aaf;
  cursor: pointer;
}
textarea {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<input id="new" type="button" value="new">
</body>
</html>

ソースの解説

$('#new').click(function() {
newボタンをクリックしたときに、
$('<div class="sticky">Drag & Double Click!</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のタグのみを外し文章はそのまま残しておくことができるのです。

まとめ

jQuery UIを使えば、このように複雑そうに見える付箋アプリも、短くコンパクトに作成することができるのです。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0