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

付箋

デスクトップに仮想的に貼り付けられる付箋アプリを使っている人は多いと思います。今回はブラウザ上の自由な位置に貼り付けてドラッグできる付箋を作ってみましょう。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　次ページ

ポンクソフト