JQuery-UIのResizableとDraggableを利用してスケジュール表を作る その3(ドラッグでの移動)

Javascript, 開発

おはようございます。

なかなか時間がとれず、あまり進んでいないのですが、
とりあえずドラッグできるようにしたので晒します。

プログラムは、
前回から結構変わってしまっている(主に表が)ので一応全体を。

スポンサーリンク

画面

sample.html

スタイル

style.css

 

スクリプトはだいぶすっきりしましたが、画面(表)の構成をがっつり変更しました。

というのも、
ドラッグできる範囲を制御するために、
縦横のヘッダー部分とテーブル部分を分離したためです。

これによって、もう少し手を加えればヘッダ―部分を固定してスクロールなんかもできるようになります。(それはまた機会があれば)

起動してみる

初期表示
初期表示
適当に線を引く
適当に線を引く
ドラッグで移動
ドラッグで移動

まとめ

次回はイベント系の処理を追加していきたいと思います。

ではでは。

スポンサーリンク


関連するコンテンツ