原生js 實現可拖拽樹形目錄結構

話不多說，先上圖：
點我查看演示
實現技術要點

1. 目錄結構層級的不可確定性；
   此處應當使用遞歸遍歷的方式遍歷數據對象；
   依據每次遍歷的結果生成一個節點；
   貼代碼：

for(let i=0;i<obj.length;i++){
	if(obj[i].children.length){//判斷是否循環到當前葉子節點
		this._forList(obj[i].children,this._setHtml(obj[i],Dom));
	}else{
		this._setHtml(obj[i],Dom);
	}
}

2. 獲取拖拽對象及目標放置對象
   本示例中以ul->li的結構生成目錄，理所當然的li是每次拖拽的對象，ul是放置的目標了；
   這樣就必須在每個li和ul上放上拖拽的事件了；
   貼代碼：

var liDom1 = document.createElement('li');
liDom1.className = "li"+data.id;
liDom1.draggable = "true";
liDom1.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setData("Text", ev.target.className);
	_$this.flag = true;
});
...
var ulDom1 = document.createElement('ul');
ulDom1.className = "hide ul"+data.id;
ulDom1.addEventListener('drop',function(ev){
    _$this._drop(ev);
})
ulDom1.addEventListener('dragover',function(ev){
    _$this._allowDrop(ev);
})

3. 注意啦，我要講重點了，爲了在葉子節點後面可以拖拽生成新的節點，那麼就必須在葉子節點的li裏面添加一個ul；（不好理解嗎？就是說當在一個葉子節點的後面拖拽上去一個節點後，這個之前創建的ul就派上用場了，他就會讓你想拖拽到其它節點時一樣不用再寫單獨的規則，這也是我快做完了之後才發現的，所以說，寫代碼啥的麻痹還是的想考慮清楚邏輯啥）
4. 最後實現的就是更新數據了
   當DOM解構實現了改變那麼也需要實時的將原始數據也依據對應的結構進行改變了；
   這裏想說一句其實如果是使用vue或angular 這些可以進行雙向數據綁定的框架，那麼這種拖拽的功能就很好完成了，直接獲取的改變的數據節點，然後直接變換數據，DOM結構就會重新渲染了，有興趣的小夥伴做一下吧
   插件下載
   使用方法：

引用js
<script type="text/javascript" src="https://shangjiahang.github.io/shTest/js/new_file2.js" ></script>

...
<div class="app"></div>
...

<script type="text/javascript">
	var arrlist = [];//數據對象
	
	new ztreeObj(arrlist,document.getElementsByClassName("app")[0]);
</script>

文件下載
插件下載