使用鼠標移動圖片或者移動圖像怪有意思的，那這個移動的效果是怎么實現的呢？
在拖動的過程中，我們會涉及到鼠標向下按，以及移動圖形，還有我們松開這幾個步驟。
當我們將鼠標向下按的時候，我們鼠標點的這個動作，其實是有一個事件的，那如何確定鼠標
點的位置呢？
我們知道clientX 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（或客戶區）的水平坐標。
clientY 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（客戶區）的垂直坐標。
這樣我們就知道了鼠標點的坐標。
通過offsetLeft，offsetTop，我們可以求得對應圖形左上角相對於瀏覽器的位置，即為我們移動圖形的初始位置。
當我們松開這個圖形的時候，通過clientX ，clientY獲得當前鼠標的位置，我們可以通過鼠標移動的距離求得最后
我們圖形的偏移量。
還有一個需要了解的是cursor這個屬性,當它為defaulf的時候，它會是默認光標，為move的時候，為表示對象可以移動。
先看看我們原生js實現可拖拽的方法
在react中我們同樣可以實現可拖拽的方法
我們可以定義一個drag組件，將組件渲染在我們的根元素中。
我們返回的這個組件，它本身很多東西都是可變的
剛開始的時候，我們要初始化鼠標點和圖形左上角的坐標
當鼠標向下按的時候，我們會有圖像或者鼠標的偏移量
最后是我們鼠標移動和停止的事件。
此博客升華自：http://www.jq22.com/webqd1348及https://blog.csdn.net/hahahahahahahaha__1/article/details/80694175
完整的demo見我的github:https://github.com/JserJser/reactWebApp/tree/master/demo