【JQuery】エクスプローラーのようなフォルダーツリーを作ってみる(その2)

2019年7月6日Javascript,開発

おはようございます。

少し間が空きましたが、引き続きエクスプローラー風ツリーのサンプルです。

今回はドラッグアンドドロップでフォルダ移動できるようにしてみました。

スポンサーリンク

画面の修正

基本的に大した修正はしていません。

  • 説明文の変更
  • JQuery-UIの読み込み
  • CSSスタイルの追加

といった感じ。

CSS

css/style.css

次のスタイルを追加

html

sampleTree.html

スクリプト

javascript

script/sampleTree.js

次の処理を追加。

サンプルイメージ

フォルダー3の移動
フォルダー3の移動

フォルダー3をドラッグしているところ。

フォルダー4へ移動完了
フォルダー4へ移動完了

フォルダー4へ、フォルダー3が移動しました。

元々サブフォルダーがないフォルダーでしたが、フォルダーイメージと展開しているアイコンもちゃんとなってます。

サブフォルダがあるフォルダの移動
サブフォルダがあるフォルダの移動

サブフォルダーありフォルダーの移動。

移動完了
移動完了

問題なく移動できました。

まとめ

今回は JQuery-UI の Draggable、Droppable 機能を利用しました。

JQuery便利ですね。

これを自力で実装しようと思ったらなかなかに大変だと思います。

次回はもしかしたら、移動できるフォルダかどうかの判定なんかをやってみようかなと。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

2019年7月6日Javascript,開発Bootstrap,JQuery,JQueryプラグイン,サンプルプログラム

Posted by doradora