基于React.js实现原生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入门必须知道的那些事》.

效果图:

组件拆分思路:

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

var React=require('react');

var MyInput=React.createClass({
 render:function(){
  return (
  <div className="form-group">
    <label htmlFor={this.props.labelId} className="col-sm-2 control-label{this.props.labelTip</label>
    <div className="col-sm-10">
       <input name={this.props.name} type={this.props.type} onChange={this.props.onChange} className="form-control" id={this.props.labelId} placeholder={this.props.placeholder}/>
    </div>
  </div>
 );
 }
});

module.exports=MyInput;
var React=require('react');

var Button=React.createClass({

  render:function(){
    return (
      <button type={this.props.type} className="loginButton">{this.props.ButtonTip}</button>
    );
  }
})
module.exports=Button;

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

写好之后的父组件:

render:function(){
  return (
  <form className="form-horizontal" id="form" ref="dragBox" onSubmit={this.submitHandler} onMouseMove={this.move} onMouseUp={this.endDrag}>
  <DragArea callbackParent={this.onChildChanged} />
  <div id="form-wrap">
  <MyInput name="username" labelId={"userId"} labelTip={"用户名"} type={"text"} placeholder={"请输入用户名"} value={this.state.username} onChange={this.handleChange}/>
  <MyInput name="password" labelId={"pw"} labelTip={"密码"} type={"password"} placeholder={"请输入密码"} value={this.state.password} onChange={this.handleChange}/>
  <div className="form-group">
  <div className="col-sm-offset-2 col-sm-10">
  <div className="checkbox">
  <label>
  <input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} /> 记住我
  </label>
  </div>
  </div>
  </div>
  <MyButton type={"submit"} ButtonTip={"登陆"}/>
  </div>
  </form>
  );

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

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

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

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

onChildChanged:function(newState){ //因为参数过多,所以把参数放到对象里面,通过对象来传
  this.setState(newState);
},

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

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

startDrag:function(e){
  var dragBox=document.getElementById('form');
    var newState={};
    var event=e||window.event;
    event.preventDefault();
    var computedStyle=document.defaultView.getComputedStyle(dragBox,null);
    newState.left=computedStyle.left;
    newState.top=computedStyle.top;
    newState.currentX=event.clientX;
    newState.currentY=event.clientY;
    newState.flag=true;
  <span style="color: #0000ff;">  this.props.callbackParent(newState);</span>
}

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

move:function(event){
  var e = event ? event : window.event; //兼容IE的写法
  if (this.state.flag) {
    var nowX = e.clientX, nowY = e.clientY;
    var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY;
    ReactDOM.findDOMNode(this.refs.dragBox).style.left = parseInt(this.state.left) + disX + "px";
    ReactDOM.findDOMNode(this.refs.dragBox).style.top = parseInt(this.state.top) + disY + "px";
  }
},
endDrag:function(){
  var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null);
  this.setState({
    left:computedStyle.left,
    top:computedStyle.top,
    flag:false
  });
}

至此,拖拽实现!

五、反思回顾

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已上传至:https://github.com/LuckyWinty/dragDemo

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

(0)

相关推荐

  • react.js 翻页插件实例代码

    废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

  • 再次谈论React.js实现原生js拖拽效果引起的一系列问题

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘

  • React.js入门学习第一篇

    一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

  • React.js入门实例教程之创建hello world 的5种方式

    一.ReactJS简介 React 是近期非常热门的一个前端开发框架.React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http:

  • 基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • 拖拽插件sortable.js实现el-table表格拖拽效果

    目录 问题描述 案例一 简单拖拽 代码附上 案例二 el-table表格拖拽 效果图 代码附上 问题描述 Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动端哦.本文举两个案例来学习一下. 案例一 简单拖拽 效果图 代码附上 关于理解看注释哦,运行的话复制粘贴即可 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <t

  • js实现单元格拖拽效果

    本文实例为大家分享了js实现单元格拖拽效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: relative; } #box div { position: absolute; width:

  • js实现简单的拖拽效果

    本文实例为大家分享了js实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.拖拽的基本效果 思路: 鼠标在盒子上按下时,准备移动 (事件加给物体) 鼠标移动时,盒子跟随鼠标移动 (事件添加给页面) 鼠标抬起时,盒子停止移动 (事件加给页面) var o = document.querySelector('div'); //鼠标按下 o.onmousedown = function (e) { //鼠标相对于盒子的位置 var offsetX = e.clientX - o.offsetL

  • js实现简单图片拖拽效果

    本文实例为大家分享了js实现简单图片拖拽效果的具体代码,供大家参考,具体内容如下 //图片需要自己导入 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>在当前显示区范围内实现点不到的小方块</title> <style> div{position:fixed;width:100px;height:100px; background-

  • Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • 使用js实现的简单拖拽效果

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <ti

  • js面向对象方式实现拖拽效果

    本文实例为大家分享了js面向对象方式实现拖拽的具体代码,供大家参考,具体内容如下 拖拽功能的实现原理:(直接拿走!) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

  • js css3实现图片拖拽效果

    本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align: center; } .container{ display: flex; just

  • js实现小窗口拖拽效果

    本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po

随机推荐