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聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
随机推荐
- 一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览 源码下载 html代码: < ...
- 实际应用中的C#加密
在系统的管理员有着实际的应用,对于一个数据库管理系统来说,数据库安全还是挺重要的,所以在存入到数据库的密码通常都是加密的.即使有着hack攻破数据库后,也不会那样的容易的盗取你的账号和密码,这样可以减 ...
- sublime 设置侧边栏颜色
Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...
- 【Unity笔记】第三人称相机跟随
第三人称,摄像机跟在角色后上方. void Update () { myCamera.position = transform.position + , ); myCamera.LookAt(tran ...
- 中断线程详解(Interrupt)
在上篇文章<多线程的使用——Thread类和Runnable接口>中提到中断线程的问题.在JAVA中,曾经使用stop方法来停止线程,然而,该方法具有固有的不安全性,因而已经被抛弃(Dep ...
- eclipse中使用maven创建项目JDK版本默认是1.5解决方法
请看解决方案: 1. 修改maven的settings.xml文件. 添加以下行,jdk版本改为自己需要的版本: <profile> <id>jdk-1.7</id> ...
- 一、think in java 第一章
一.面向对象程序设计方式: 1.万物皆为对象. 将对象视为奇特的变量,它可以存储数据,也可以要求它在自身上执行操作. 2.程序是对象的集合,它们通过发送消息来告知彼此所要做的. 要请求一个对象,就必须 ...
- rufus/scheduler
之前先在initializers 文件夹下建立了一个task.rb ,rails服务启动的时候执行,本地没问题,可是服务器上启动了3个进程,会执行3遍,解决方法是 把task.rb 放到 script ...
- ajax回调函数中使用$(this)取不到对象的解决方法
如果在ajax的回调函数内使用$(this)的话,实践证明,是取不到任何对象的,需要的朋友可以参考下 $(".derek").each(function(){ $(this).cl ...
- View与Model绑定注意事项 (视图无数据显示)
Qt 中视图与模型绑定时,模型必须使用new来创建.否则刚开始初始化的时候,视图无数据显示,或者后期视图不能随着模型的改变而改变. 具体原因:我猜测是局部变量生命周期的问题.new 的变量在堆中,除非 ...