
該工具由一個清單、一個拓撲圖和一個文本框三部分組成,使用者任意拖拽本地多圖檔檔案到任意頁面部分,HT自動将圖檔資訊生成對應的DataModel資料模型,清單顯示圖檔效果、名稱和寬高資訊,拓撲顯示圖檔、修改時間和檔案大小等資訊,文本框生成對應注冊到htDefault.setImage函數的代碼片段,使用者直接可以将文本框内的代碼拷貝到自己的工程的js檔案進行使用。
該代碼主要對window添加了dragenter、dragexit、dragover和drop的拖拽處理,大部分都是通過e.stopPropagation();和evt.preventDefault();阻止預設行為,我們僅需在最後的drop事件中通過e.dataTransfer.files得到所有目前拖拽檔案資訊,建構FileReader進行加載,然後對加載的資訊建構對應DataModel中的ht.Node對象和屬性就完事了。