我們知道前端最重要的一部分就是如何將資料生動形象的展現給使用者，資料展現的巧妙的話在加上H5的一些有意思的互動，說不定就會成為一個很有意思的頁面了。常見的資料展示的方式如用表格可以展示很多資料，或者用z-tree展現上下級節點的資料，又或者用echart外掛或者對d3對資料進行一些視覺化處理，使得資料展現的更為直觀豐富。今天來分享一下類似樹結構的資料展示，是一顆倒立的樹，根節點在最上面。這也是我以前遇到的一個奇葩需求，要是大家遇到類似的需求，可以借鑑一下。

效果展現如下：

每一個樹的結點都可以展示一部分業務需要的資料。這種結構的一個好處就是層次結構更加清晰，比z-tree那種展示出的層次要直觀一些。這兒比較難的是這個樣式結構，外層的容器用的是flex佈局，保持根節點始終居中，每一個樹節點都是一個div，有點複雜的是樹節點下面的橫線，這些橫線分為三種，每種我都用不同的顏色標記了，（詳細的可以看我github上的原始碼上面css有詳細的註釋）其中要注意的是葉子節點是沒有向下的線的。因此給每個葉子節點都加了一個leaf的class來標記。右邊有一個盒子，可以把它拖到左邊樹結構上面去，這兒我加了一點判斷如果本身是葉子節點的話就不能再擁有子節點了，所以當你拖到葉子節點上面的時候給出相關提示，不能夠在葉子節點下面繼續新增節點。所以可以吧節點拖動到0_0和1_1的兩個節點上面。

這兒幫助大家回顧一下HTML5的拖動效果，首先當然需要在被拖動元素設定draggable="true"屬性，這樣我們才可以拖動元素，瀏覽器的預設效果會在滑鼠拖動的時候有一個拖動元素的映象（約50%的透明度）跟隨在滑鼠右下方，我們把右邊的那個盒子稱之為被拖動元素將左邊可以放置的元素（0_0,1_1）稱之為放置目標元素的話，從拖動開始分別會觸發被拖動元素的三個事件分別是：

• dragstart:被拖動元素拖動的一瞬間觸發。
• drag:被拖動元素在拖動的過程中會持續觸發。
• dragend:被拖動元素被釋放的那一刻觸發，這兒需要注意，無論將被拖動元素放在了有效目標身上還是無效的目標身上都會觸發該事件的

下面羅列一下放置目標元素在這個過程中會觸發哪些事件。

dragenter:被拖動元素剛剛拖入放置目標元素之上觸發。

dragover:被拖動元素在放置目標元素之上來回移動會持續觸發。

dragleave:被拖動元素離開放置目標元素時觸發。

drop:被拖動元素釋放的時候觸發，注意，這兒有個坑，有些元素如div元素不是有效的目標放置元素，這時候不會觸發drop事件，需要在dragenter和dragover事件中阻止預設事件，才會在div元素上釋放被拖動元素時觸發drop事件。

被拖動元素拖動時候的瀏覽器預設效果如下圖：

這個被拖動到根節點之上，會加在這個節點的nodeWrap之中，每次拖動完成之後會有一個drawLine函式重新計算頁面上節點之間線和線之間的關係，重新繪畫各個線。

拖動後效果如下圖展示：

我們可以看到在1_2的右邊多了一個剛剛被拖過來的節點。

好了，今天就寫到這兒，有興趣的小夥伴可以去github上直接下載我的原始碼看下，上面有詳細的註釋。