位置: 编程技术 - 正文

基于React.js实现原生js拖拽效果引发的思考(react jss)

编辑:rootadmin

推荐整理分享基于React.js实现原生js拖拽效果引发的思考(react jss),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript react,javascript react,react引用js脚本,react all in js,react引用js脚本,react .js,react jss,react引用js脚本,内容如对您有帮助,希望把文章链接给更多的朋友!

一、起因&思路

一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。

首先,其实拖拽效果的思路是很简单的。主要就是三个步骤:

1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数。

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

3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值。

注意:这里主要是通过绝对定位的top和left来确定元素的位置的,因此被拖拽元素的css一定要设置绝对定位。

二、辅助工具

辅助工具主要就是是开发过程变得高效,而且酷炫的。在这个demo中,要给大家推荐一个gulp+browser-sync的开发工具,gulp有很多功能,在这个demo中gulp的作用主要是可以设置实时编译react中的jsx文件,当然如果你写css用的是sass,也可以设置实时编译sass。用browser-sync这个呢,主要就是可以自动实时刷新页面,我们平时做页面,看效果的时候,通常都是通过F5来刷新浏览器,然后看到页面的。但是用了这个插件,你写完代码的时候,只要按下,ctrl+s保存,新的效果就会自动在浏览器中刷新,然后看得到了。

用法详解:

安装:

1.在node的环境下,安装gulp,这里就不详说了,具体过程可参考我的博文《react.js入门必须知道的那些事》

2.安装gulp-livereload,在命令行或者git bash ,输入npm install --save-dev gulp-livereload

3.安装gulp-watch,在命令行或者git bash ,输入npm install --save-dev gulp-watch

4.安装browser-sync,在命令行或者git bash ,输入npm install --save-dev browser-sync

配置及解释如图:

三、定义组件构建页面

备注:这里的代码说明均在react相关模块安装好的情况下,安装过程见我的博文《react.js入门必须知道的那些事》.

基于React.js实现原生js拖拽效果引发的思考(react jss)

效果图:

组件拆分思路:

我当时觉得组件拆分得细一点好,所以我把input、button分别做成了一个组件:

由于input有很多都是需要指定的,这种情况下,如果像我这样定义需要传太多参数,而且其实登陆的input大多都是固定且没必要复用的,所以这样其实不大好。这里的input直接写比较好。

写好之后的父组件:

备注:因为demo中需要获取真实的dom节点,所以定义了ref。

再加上css样式,页面就完成啦!最后,重点来啦!!!

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

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

而子组件需要绑定这个函数,如上面的代码:callbackParent={this.onChildChanged}

在子组件中,响应的函数为:

这样,在子组件中就启动了拖拽开关,并且已经更新了from的相关参数,from的两外两个事件,move和endDrag分别为:

至此,拖拽实现!

五、反思回顾

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

2.文中子组件获取from的参数时,用了var dragBox=document.getElementById('form');去找dom,这样好像违反了react的一些理念。但是我还不是很熟悉该怎么从子组件获取父组件的dom。我试过在父组件定义refs=this.refs.dragBox。然后传给子组件,但是不知道为什么浏览器一直报错说这个不是dom节点。求大神指教。

3.拖拽事件的一般写法,是在document上面定义mousemove和mouseup事件,但是这两个事件都关联到from的参数,这样的话,如果我在react中定义在document,就跟踪不了相关参数。所以我就定义在了from上面。是不是有更好的方法呢?求分享!

4.革命尚未成功,同志仍需努力!

本demo已上传至:

React.js入门学习第一篇 一、JSX介绍①定义JSX=JavaScriptXML,是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读

JavaScript 不支持 indexof 该如何解决 indexOf()方法定义和用法indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。该方法将从头到尾地检索字符串stringObject,看它是否含有子

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析 本文是积木网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧!1.children

标签: react jss

本文链接地址:https://www.jiuchutong.com/biancheng/375994.html 转载请保留说明!

上一篇:基于javascript实现tab切换特效(基于JAVASCRIPT实现的可视化工具是)

下一篇:React.js入门学习第一篇(react基础入门)

  • 销项税额和进项税额发票怎么区别
  • 企业技术转让享受税收优惠政策应符合哪些条件
  • 个人出租住宅需要缴纳房产税吗
  • 研发费用加计扣除是什么意思啊
  • 私车公用去税务局开什么发票
  • 生产成本里面的直接人工
  • 公墓增值税政策
  • 附加税减半征收政策从什么时候开始
  • 支票结算业务流程
  • 农产品增值税抵扣新政策2021
  • 订单式生产管理
  • 现金日记账支出是记借还是贷
  • 购入包装物
  • 抵缴以前年度所得税怎么做?
  • 银行存款日记账最后一行怎么填
  • 跨地区经营怎么交税
  • 分公司是否可以贷款
  • 利润表中所得税费用为负数是什么意思
  • 无形资产摊销金额计入什么科目
  • 增值税 3万
  • 个人代公司付货款要证明吗
  • 税控盘逾期未抄报,交罚款需要带什么
  • 代开专票不满10万的要交附加吗?
  • ghost读不出硬盘
  • 销售返点怎么做分录
  • php 文件操作
  • 无线路由器如何桥接wifi信号
  • 网页视频播放不流畅原因
  • 土地增值税预缴税率表
  • vue切换背景图片
  • 车子的保险费
  • php数组拼接成字符串
  • pnmdp
  • vue笔记项目
  • 办理组织机构代码证需要什么材料
  • ai技术排名
  • c++图像二值化
  • vue前端项目实战
  • 什么时间可以开发票
  • 帝国cms源码
  • java计数器的用法
  • 网站缩略图生成
  • 增值税发票上多了一个点能刮掉吗
  • 在计算应纳税所得额时,下列支出不得扣除
  • 关于固定资产的说法
  • 第一次建账要填期初余额吗
  • 物业建车棚谁出钱
  • 投资性房地产改造期间计提折旧吗
  • 进口关税减免政策
  • 非同一控制下企业合并取得的长期股权投资
  • 银行利息收入如何记账
  • 安置用房视同销售,怎么确认扣除费用?
  • 产品成本计算中最基本的方法是
  • 其它应付款核销法律意见书
  • 公司往来借款怎么做账
  • 销售费用明细科目有哪些内容
  • sql批量替换字符串
  • Win10 Mobile 10581预览版升级界面曝光 上手视频观赏
  • mac合盖不休眠怎么办
  • rosnmgr.exe - rosnmgr是什么进程 有什么用
  • win7退出家庭组
  • freebsd连接wifi
  • Extjs ajax同步请求时post方式参数发送方式
  • python之virtualenv的简单使用方法(必看篇)
  • 自动清除数据
  • linux中mysql备份shell脚本代码
  • es6十大特性
  • [置顶]JM259194
  • shell脚本特性
  • jquery中遍历指定的对象和数组是哪个方法
  • python27文件夹
  • jquery页面关闭事件
  • 为什么python那么难
  • 河北怎么网上申请无犯罪证明
  • 个体户需要报个税的综合所得吗
  • 江苏国税申报怎么操作流程
  • 税务登记证的电子版在哪
  • 河南旧县为什么叫新县
  • 河南税筹公司
  • 深圳国税申报系统恢复数据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设