基于React.js实现原生js拖放效果的思考

一、思考的原因。

我一直想写一个原生js拖放效果。此外，我最近学会了很好的反应。所以我们用react来实现这种拖曳效果。

首先，其实拖拽效果的想法很简单。主要有三个步骤：

1.当1.onmousedown时，启动可拖动事件并记录被拖动元素的原始坐标参数。

2.2.onmousemove时，实时记录鼠标的移动距离，结合第一阶段被拖动元素的坐标参数计算设置新的坐标值。

3.当3.onmouseup时，关闭可拖动事件并记录新的坐标值。

注意：这里元素的位置主要是由上下左右的绝对定位决定的，所以拖动元素的css一定要设置绝对定位。

第二，辅助工具。

辅助工具主要是让开发过程变得高效和酷。在这个演示中，我们应该推荐一个浏览器同步开发工具。大口有许多功能。在这个演示中，grave的主要功能是实时设置和编译react中的jsx文件。当然，如果用sass编写css，也可以实时设置和编译sass。有了浏览器同步，最主要的是它可以实时自动刷新页面。我们平时做页面看效果的时候，一般都是通过F5刷新浏览器然后看到页面。但是有了这个插件，当你写完代码后，只需要按ctrl+s保存，新的效果就会在浏览器中自动刷新，然后就可以看到了。

使用详情：

安装：

1.在node的环境下，安装大口，这里就不描述了。具体流程请参考我的博文《react.js入门必须知道的那些事》。

2.在命令行或git bash中，安装大口-live load，并输入NPM安装-保存-开发大口-livereload。

3.在命令行或git bash中，输入npminstall-save-dev-glaw-watch。

4.安装浏览器同步，在命令行或git bash中，输入NPM安装保存开发浏览器同步。

配置和说明如下：

第三，定义组件构建页面。

注意：这里的代码描述都是在安装了react的相关模块后提供的。安装过程请参考我的博文《react.js入门必须知道的那些事》。

渲染：

组件拆分思想：

当时我觉得详细拆分组件会更好，就把input和button分别做成一个组件：

var React=required(' React ')；var MyInput=react . create class({ render : function(){ return(div class name=' form-group ' label html FOr={ this . props . labelid } class name=' col-sm-2 control-label { this . props . label tip/label div class name=' col-sm-10 ' input name={ this . props . name } type={ this . props . type } onChange={ this . props . onChange } class name=' form-control ' id={ this . props . labelid。}});module.exports=MyInputvar React=required(' React ')；var Button=react . create class({ render : function(){ return(Button type={ this . props . type } class name=' loginButton ' { this . props . Button tip }/Button)；}})模块。exports=Button；因为需要指定的输入很多，在这种情况下，如果像我一样需要在定义中传递太多的参数，而实际上大部分记录的输入都是固定的，不需要重用，那就不好了。最好直接在这里写输入。

写入后的父组件：

render : function(){ return(form class name=' form-horizontal ' id=' form ' ref=' drag box ' on submit={ this。提交处理程序} onMouseMove={ this。move } onMouseUp={ this。结束拖动区域回调parent={ this。onchildchanged }/div id=' form-wrap '我的输入名称=' username ' labelId={ ' userId ' }标签提示={ '用户名}类型={'text'}占位符={ '请输入用户名}值={ this。国家。username } onChange={ this。handlechange }/MyInput name=' password ' labelId={ ' pw ' } labelTip={ '密码}类型={ '密码' }占位符={ '请输入密码}值={ this。国家。密码} onChange={ this。handlechange }/div类名='表单组' div类名='col-sm-offset-2 col-sm-10' div类名='选中'标签输入名称=“checked”类型=“checkle”checkly={ this。国家。选中的} onChange={ this。handlechange }记住我/label /div /div /div MyButton类型={'submit'} ButtonTip={ '登陆}//div/form)；备注：因为演示中需要获取真实的数字正射影像图节点，所以定义了参考文献1 .

再加上钢性铸铁样式，页面就完成啦！最后，重点来啦！

四、父子组件间通信实现拖拽

说明：由于我要实现的效果是，鼠标按住子组件阻力面积的时候，拖动的是整个形式，所以启动拖拽的是DragArea，而响应的是表格。所以，一开始必须把父组件的一些状态属性传给子组件，然后鼠标在阻力面积按下的的时候，必须通过子组件阻力面积找到父组件的原始坐标参数，然后更新父组件里面的状态属性，并且告诉父组件可以进行拖拽了。父组件给子组件传参就是直接传递的。而子组件给父组件传参需要通过事件。所以在父组件中定义这么一个函数：

onchildchanged :函数(newState){//因为参数过多，所以把参数放到对象里面，通过对象来传这个。setstate(newState)；},而子组件需要绑定这个函数，如上面的代码： callbackparent={ this。onchildchanged }

在子组件中，响应的函数为：

startdrag :函数(e){ var drag box=document。getelementbyid(' form ')；var newState={ }；var event=e | | window.eventevent。prevent default()；var计算样式=文档。默认视图。getcomputed style(拖动框，null)；纽斯塔特。left=计算样式。向左；纽斯塔特。top=计算样式。顶部；纽斯塔特。currentx=事件。clientx纽斯塔特。currenty=事件。客户关系；newstate . flag=true span style=' color : # 0000 ff ' this。道具。回调父级(newState)；/span}这样，在子组件中就启动了拖拽开关，并且已经更新了从的相关参数，来自的两外两个事件走吧和端阻力分别为：

move :函数(事件){ var e=event？事件： window.event//兼容工业管理学(工业工程)的写法如果(这个。国家。flag){ var nowX=e . clientx，nowY=e . client yvar disX=nowX-this。国家。currentx，DIsy=NowY-这个。国家。当前；对DOM做出反应。FindDomnode(这个。参考文献。DragBox)。风格。left=ParSeint(这个。国家。左)DIsX ' px对DOM做出反应。FindDomnode(这个。参考文献。DragBox)。风格。top=ParSeint(这个。国家。top)DIsy ' px '；}}，enddrag :函数(){ var computed style=document。defaultview。getcomputed style(反应DOM。finddomnode(这。参考文献。拖框)，空值)；这个。setstate({ left : computed style。左，top:computedStyle.top，标志： false })；}至此，拖拽实现！

五、反思回顾

1.理论上来说，拖拽效果可以在任意元素中实现，拖拽的思路都是一致的，所以理论上来说，拖拽各个过程的函数可以抽离出来，做成一个混合，然后可以反复调用。我一开始的思路就是这样，但是在传参、响应、绑定元素上面总是出错。查找了一下资料，没找到反应与拖拽的简单写法资料，只有一些反应的专用插件，而且是用ES6的写法，由于现在的水平还没能看懂。所以暂时放弃了这种写法。希望有相关想法的大神们和我交流一下。

2.在文本中，当子组件从获取参数时，它使用vardragbox=document . getelementbyid(' form ')；去dom，这似乎违反了反应的一些理念。但是我不熟悉如何从子组件获取父组件的dom。我试图在父组件中定义refs=this.refs.dragBox。然后将其传递给子组件，但是我不知道为什么浏览器一直报告这不是dom节点。求大神指点。

3.拖放事件的一般写法是在文档上定义mousemove和mouseup事件，但这两个事件与from参数有关。在这种情况下，如果我在react中的文档中定义它们，我就不能跟踪相关的参数。所以我从上面定义了它。有没有更好的办法？求分享！

4.革命没有成功，同志们还需要努力！

本演示已上传至：https://github.com/LuckyWinty/dragDemo.

以上就是本文的全部内容，希望对大家的学习有所帮助。