在自己发了之前的几篇文章之后感觉还是没有什么进展，读的人很少并且自己也意识到这样写的进度很慢了，那我就再抽出我的多一点时间来加快我的进度。
继上次说的计数组件之后这次我打算写一个很常见但是能训练很多react的点的小功能组件，这就是很多学习者很熟悉的拖拽事件，虽然说这个很简单但是他能比较实际的反映出react功能的强大之处。废话少说我们开始吧。
通过前面的学习认识大家有可能意识到我们修改这中小例子的时候其实就是在修改我们的js文件其他的不需要动很多的东西，所以我们就先分析一下我们的这个例子需要我们做一些什么。拖拽事件牵扯很多的DOM交互这也是我之所以说这个例子的原因。
首先我们需要的是一个实现拖拽的元素(Drag组件)，另外需要给他一个定位，其中最重要的就是我们需要分析我能实现拖拽最重要的数据是什么？那就是样式的left以及top值，这样的话我们就应该将这两个放在组件的state中然后这两个值就是我们这次操作的主要数据，另外就是我们需要获取DOM元素并且动态的获取鼠标的位置与鼠标开始拖拽的位置然后进行运算，经过这样的分析我们就大概清楚我们需要做的是什么了.
第一步我们需要在界面添加一个拖拽元素，像这样：
浏览器展示
代码显示像这样：
react.js
这样的话我们的基本的DOM结构就写好了接下来我们需要做的就是动态获取鼠标的位置以及元素定位了，这样的话就需要我们绑定事件来实现。
第二部，我们对拖拽元素添加鼠标事件来进行对拖拽的反应，像这样：
绑定鼠标事件代码
然后我们在组件中写一下具体的实现函数：
对应的函数事件
其中我需要解释的就是这里面的参数ev这个是经过react处理的参数，输出后会发现里面会有鼠标事件的所有元素，包括位置目标对象等等，大家可以仔细看一下。然后我们就是进入界面看一下我们鼠标点击下去的时候会不会有相应的操作。如果你不粗心的话应该很顺利的才出现了相应的输出。
第三步就是我们需要进行运算就是我们需要获得鼠标开始拖拽的位置就是鼠标位置减去元素的定位数值，算法我相信大家比我强的多也熟悉的多吧，就这样我们还需要调用this.setState()来进行动态的获取以及赋值来改变元素的位置，试想一下我们改变元素位置是发生在鼠标移动的事件中所以我们这个setState是要写在鼠标移动事件里面的，代码像这样：
鼠标位置算法实现
这样的话我们的一个简单的拖拽事件就完成了，需要强调的是我这里面的css样式都写在了行内并且也是以this.state的值进行渲染的，以后我会给大展示我们经常接触的那种样式，还有就是在这里面我们基本用的是原生js进行编写的，往后走我还会给大家展示结合JQ的编写react组件的教学，希望大家能跟随我的脚步进行学习。
最近我还在同步更新webpack的教学文章希望有用的着的同学过去看一下。
网友评论