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聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
随机推荐
- js中特殊转换字符为html标签
function htmlEncode(text){ return text.replace(/&/g,'&').replace(/\"/g,'"'). ...
- c#的static什么时候使用
C# 什么时候用static? 2011-10-14 14:37江户川奈叶 | 浏览 1733 次 Perl 在static void Main()的方法外面设一个 static int amoun ...
- linux终端无打印信息的实现
linux启动时会又大量信息打印,若要使启动信息不打印,需修改内核中两处: 1. 内核配置项. CONFIG_SERIAL_ATMEL_CONSOLE=y //去掉终端配置选项.2. 内核解压缩 ...
- iOS边练边学--UITabBarController的简单使用
一.UITabBarController的使用步骤 初始化UITabBarController 设置UIWindow的rootViewController为UITabBarController 根据具 ...
- nodejs系列笔记02---模块路径解析
模块路径解析规则 参考这篇博客 我们已经知道,require函数支持斜杠(/)或盘符(C:)开头的绝对路径,也支持./开头的相对路径.但这两种路径在模块之间建立了强耦合关系,一旦某个模块文件的存放位置 ...
- javaScript之function定义
背景知识 函数定义 在javaScript中,function的定义有3种: 1.匿名定义 function(){} 2.非匿名定义 fun ...
- selenium测试（Java）--截图（十九）
package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...
- VS2010 快捷键设置，快速编码1
全屏:Shift+Alt+Enter注释选定内容:Ctrl+E+C/Crtr+E+U代码格式化:ctrl+E+F VS2008 使用小技巧——快捷键1. 怎样调整代码排版的格式?选择:编辑—>高 ...
- 【案例分析】Linux下怎样查看port占用情况
作者:zhanhailiang 日期:2014-11-08 基于express写一个測试server代码例如以下,可是执行失败,报"listen EADDRINUSE".字面上理解 ...
- 在PADS中,大面积覆铜有3个重要概念