之前用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. <a>设置长宽

    因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西, 1. 块元素. 特性:有物理属性,width,height写值起作用,而且要占据一行.2. 内联元素. 特性:没有物理属性.但是ma ...

  2. 【C#/WPF】调节图像的HSL（色相Hue、饱和度Saturation、明亮度Lightness）

    先说概念: HSL是一种描述颜色的方式,其他颜色描述方式还有大家熟悉的RGB值.HSL三个字母分别表示图像的Hue色相.Saturation饱和度.Lightness明亮度. 需求: 制作一个面板,包 ...

  3. Jquery解析json数组字符串

    最近在工作中用到了Jquery来解析json字符串,网上解析jquery解析json单个对象的实例不少,但是jquery解析json数组的实例却是不多,下面我举一个简单的例子来跟大家分享与一下,本人水 ...

  4. KafkaStream实现wordcount

    KTable应用 KTable wordCounts = textLines // Split each text line, by whitespace, into words. .flatMapV ...

  5. [转]RabbitMQ，ActiveMQ，ZeroMQ，Kafka之间的比较与资料汇总

    MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka.这几种MQ到底应该选择哪个?要根据自己项目的业务场景和需求.下面我列出这些MQ之间的对比数据和资料. 第一部 ...

  6. Game Loop的几种实现方式

    http://www.bennychen.cn/2011/06/game-loop-model/ —————————————————————————————— 写这篇博客的目的是为了对game loo ...

  7. FATAL ERROR: Could not find ./bin/my_print_defaults 解决方法

    FATAL ERROR: Could not find ./bin/my_print_defaults If you compiled from source, you need to run 'ma ...

  8. js学习笔记32----new

    new:用于创建一个对象. 有 new 与 无 new 时的区别,查看下面的示例代码应该会增加感觉: <!DOCTYPE html> <html lang="en" ...

  9. -27979 LoadRunner 错误27979 找不到请求表单 Action.c(73): Error -27979: Requested form not found

    LoadRunner请求无法找到:在录制Web协议脚本回放脚本的过程中,会出现请求无法找到的现象,而导致脚本运行停止. 错误现象:Action.c(41): Error -27979: Request ...

  10. Qt信号槽的一些事

    注:此文是站在Qt5的角度说的,对于Qt4部分是不适用的. 1.先说Qt信号槽的几种连接方式和执行方式. 1)Qt信号槽给出了五种连接方式: Qt::AutoConnection 0 自动连接:默认的 ...