之前用vue做日程管理组件的时候，用到了点击拖拽的效果，即点击元素，鼠标移动到哪里，元素移动到哪里，鼠标松开，拖拽停止，现在在弄react，于是也在想实现这个效果，经过一番折腾，效果出来了，代码如下：

<body>

<div id="test"></div>

</body>

<script type="text/babel">

    let catDom = "";

    let catSwitch = false;

    class Cat extends React.PureComponent {

        constructor(props) {

            super(props);

            this.state = {

                initSwitch: false

            }

        }

        componentDidMount() {

            catDom = this.cat

        }

        toggleOpen(result,event) {

            this.setState({

                initSwitch: result

            }, () => {

                catSwitch = this.state.initSwitch;

                console.log(this.state.initSwitch, result);

            });

            event.preventDefault()

        }

        render() {

            const mouse = this.props.mouse;

            return (

                <div>

                    <img ref={item => this.cat = item} src="./../imgs/cat.jpg"

                         onMouseDown={this.toggleOpen.bind(this, true)} onMouseUp={this.toggleOpen.bind(this, false)}

                         style={{position: "absolute", left: mouse.x, top: mouse.y}}/>

                </div>

            )

        }

    }

    class Position extends React.PureComponent {

        constructor(props) {

            super(props);

            this.state = {

                x: 0,

                y: 0

            }

        }

        movePosition(event) {

            if (catDom && catSwitch) {

                this.setState({

                    x: event.clientX - catDom.width / 2,

                    y: event.clientY - catDom.height / 2

                })

            } else {

                return null;

            }

        }

        render() {

            return (

                <div style={{height: "100vh"}} onMouseMove={this.movePosition.bind(this)}>

                    {this.props.render(this.state)}

                </div>

            )

        }

    }

    class Result extends React.PureComponent {

        render() {

            return (

                <div>

                    <Position render={mouse =>

                        (<Cat mouse={mouse}/>)}>

                    </Position>

                </div>

            )

        }

    }

    ReactDOM.render(

        <Result></Result>,

        document.getElementById("test")

    )

</script>

　　

效果如图，cat猫咪的图片自己找，整体还不错，不会的可以私信我...

react实现的点击拖拽元素效果的更多相关文章

  1. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  2. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  3. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  4. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

  5. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  6. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  7. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  8. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. reactnative实现qq聊天消息气泡拖拽消失效果

    前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...

随机推荐

  1. echart 地图

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  2. 使用wireshark抓包工具 检测不到本地网卡

    wireshark 抓包工具无法检测到自身的网卡 下载wireshark 地址:https://www.wireshark.org/download.html 安装,打开后发现没有windows 本身 ...

  3. Zookeeper配置文件参数与含义

    zoo.cfg   # The number of milliseconds of each tick tickTime=2000 # The number of ticks that the ini ...

  4. yarn 用户导致的被挖矿 启用Kerberos认证功能，禁止匿名访问修改8088端口

    用户为dr.who,问下内部使用人员,都没有任务在跑: 结论: 恭喜你,你中毒了,攻击者利用Hadoop Yarn资源管理系统REST API未授权漏洞对服务器进行攻击,攻击者可以在未授权的情况下远程 ...

  5. pdo mysql连接时报[2002] No such file or directory

    将PDO连接中的dsn的host由“localhost”改为“127.0.0.1”即可

  6. laravel 5.1 的程序性能优化(配置文件)

    命令优化 本文的目的是来弄清楚一些优化命令在 Laravel 5.1 和之前版本之间的差别. 在 15年6月发布的 Laravel 5.1版本中, 命令和他们的逻辑方法被清理掉, 本文章就是描述这些不 ...

  7. fancybox 使用方法

    项目中需要做一个相册功能.选择的是fancybox,大概记录一下使用方法: 1.引用fancybox所需要的文件,你可以下载至本地或者引用CDN. fancybox最新版本下载地址:http://fa ...

  8. CSS实现圆角六色渐变自适应按钮

    Css代码 .g_a{display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #cccccc; border- ...

  9. 数据库 proc编程九

    第一种动态sql EXEC SQL EXECUTE IMMEDIATE :psql; .仅适用于非select语句 .嵌入SQL语句中不能包含输入宿主变量 void main() { EXEC SQL ...

  10. Spark1.0.0 学习路线指导

    转自:http://www.aboutyun.com/thread-8421-1-1.html 问题导读1.什么是spark?2.spark编程模型是什么?3.spark运维需要具有什么知识?4.sp ...