在自己發(fā)了之前的幾篇文章之后感覺還是沒有什么進展，讀的人很少并且自己也意識到這樣寫的進度很慢了，那我就再抽出我的多一點時間來加快我的進度。

繼上次說的計數(shù)組件之后這次我打算寫一個很常見但是能訓練很多react的點的小功能組件，這就是很多學習者很熟悉的拖拽事件，雖然說這個很簡單但是他能比較實際的反映出react功能的強大之處。廢話少說我們開始吧。

通過前面的學習認識大家有可能意識到我們修改這中小例子的時候其實就是在修改我們的js文件其他的不需要動很多的東西，所以我們就先分析一下我們的這個例子需要我們做一些什么。拖拽事件牽扯很多的DOM交互這也是我之所以說這個例子的原因。

首先我們需要的是一個實現(xiàn)拖拽的元素(Drag組件)，另外需要給他一個定位，其中最重要的就是我們需要分析我能實現(xiàn)拖拽最重要的數(shù)據(jù)是什么？那就是樣式的left以及top值，這樣的話我們就應該將這兩個放在組件的state中然后這兩個值就是我們這次操作的主要數(shù)據(jù)，另外就是我們需要獲取DOM元素并且動態(tài)的獲取鼠標的位置與鼠標開始拖拽的位置然后進行運算，經(jīng)過這樣的分析我們就大概清楚我們需要做的是什么了.

第一步我們需要在界面添加一個拖拽元素，像這樣：

瀏覽器展示

代碼顯示像這樣：

react.js

這樣的話我們的基本的DOM結(jié)構(gòu)就寫好了接下來我們需要做的就是動態(tài)獲取鼠標的位置以及元素定位了，這樣的話就需要我們綁定事件來實現(xiàn)。

第二部，我們對拖拽元素添加鼠標事件來進行對拖拽的反應，像這樣：

綁定鼠標事件代碼

然后我們在組件中寫一下具體的實現(xiàn)函數(shù)：

對應的函數(shù)事件

其中我需要解釋的就是這里面的參數(shù)ev這個是經(jīng)過react處理的參數(shù)，輸出后會發(fā)現(xiàn)里面會有鼠標事件的所有元素，包括位置目標對象等等，大家可以仔細看一下。然后我們就是進入界面看一下我們鼠標點擊下去的時候會不會有相應的操作。如果你不粗心的話應該很順利的才出現(xiàn)了相應的輸出。

第三步就是我們需要進行運算就是我們需要獲得鼠標開始拖拽的位置就是鼠標位置減去元素的定位數(shù)值，算法我相信大家比我強的多也熟悉的多吧，就這樣我們還需要調(diào)用this.setState()來進行動態(tài)的獲取以及賦值來改變元素的位置，試想一下我們改變元素位置是發(fā)生在鼠標移動的事件中所以我們這個setState是要寫在鼠標移動事件里面的，代碼像這樣：

鼠標位置算法實現(xiàn)

這樣的話我們的一個簡單的拖拽事件就完成了，需要強調(diào)的是我這里面的css樣式都寫在了行內(nèi)并且也是以this.state的值進行渲染的，以后我會給大展示我們經(jīng)常接觸的那種樣式，還有就是在這里面我們基本用的是原生js進行編寫的，往后走我還會給大家展示結(jié)合JQ的編寫react組件的教學，希望大家能跟隨我的腳步進行學習。

最近我還在同步更新webpack的教學文章希望有用的著的同學過去看一下。