JQuery-UIのResizableとDraggableを利用してスケジュール表を作る その5(予定の追加)

Javascript, 開発

おはようございます。

急に寒くなってきて、
少し風邪気味になってしまいました。

季節の変わり目なので皆さんもお気を付けください。

今回で最後となりますが
表に予定を追加する処理を実装してみました。

プログラムは前回のものを流用します。

スポンサーリンク

画面の修正

javascriptを別ファイルにしました。

sample.html

 

プログラム

js/script.js

MouseDownで動的にDivを作成し、画面上に追加するようにしました。

ポイントは、Divを配置した際にリサイズイベントも同時に動くようにしてあるところですかね。

Resizable、Draggableの設定についてはもっとうまくできるかと思いますが、
とりあえず動かすのを優先しました。

起動してみる

動かしてみた感じ
動かしてみた感じ

ちょっと動きがないとわかりにくいと思い、
ScreenPressoの動画キャプチャを使ってみました。

まとめ

ひとまずこのシリーズはここまでとする予定です。

そのうち何かサービスを作る際に役立てるつもり。

ではでは。

 

スポンサーリンク


関連するコンテンツ