react实现的点击拖拽元素效果
之前用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实现的点击拖拽元素效果的更多相关文章
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。
麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- juqery 拖拽元素
转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- H5 拖拽元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- reactnative实现qq聊天消息气泡拖拽消失效果
前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
随机推荐
- matlab与MFC
混合编程其实不难,关键是没有一个规范的,真正可以解决设置过程中出现的小问题的方法.我在设置的过程中,遇到了不少问题,花了多半天的时间,终于解决了,顺利地在vc中调用matlab 生成的dll文件中的函 ...
- RabbitMQ(二)：mandatory标志的作用
本文转自:http://m.blog.csdn.net/article/details?id=54311277 在生产者通过channel的basicPublish方法发布消息时,通常有几个参数需要设 ...
- dubbox2.8.4例子教程一
简介 Dubbo是一个来自阿里巴巴的开源分布式服务框架,当当根据自身的需求,为Dubbo实现了一些新的功能,包括REST风格远程调用.Kryo/FST序列化等等.并将其命名为Dubbox(即Dubbo ...
- 【Unity笔记】检测当前的运行平台
// 判断当前运行平台为Android平台时 if (Application.platform == RuntimePlatform.Android) { if (Input.GetKeyDown(K ...
- ubuntu 16.04 上opengl 的安装以及例子程序编译执行
因为最近在移植 Qt5.7 + opengl , 遇到了难以越过的山峰,没有办法,试着在 ubuntu 16.04上将 opengl 配置以下,记录: 安装相关的库: sudo apt-get ins ...
- ExtJs Ext.data.Model 学习笔记
Using a Proxy Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'], proxy: ...
- CMake 用法导览
Preface : 本文是CMake官方文档CMake Tutorial (http://www.cmake.org/cmake/help/cmake_tutorial.html) 的翻译.通过一个样 ...
- Hibernate- 基本查询
01.搭建开发环境 02.基本查询 package com.gordon.test; import java.text.DecimalFormat; import java.util.Arrays; ...
- java- 综合实例-增删查改查，删除多项，分页，令牌机制
重点内容:分页.令牌机制(重定向下防止重复提交).使用c3p0连接数据库(以及数据库连接类) 项目结构: 类: 项目展示: 数据库: /* SQLyog Ultimate v12.09 (64 bit ...
- chrome 如何利用快捷键将光标移动到地址栏
Windows: Ctrl + L 或 Alt + D 或 F6 Mac: Command + LLinux: Ctrl + L