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聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
随机推荐
- python学习笔记（15）--pygame的安装
说明: 1. 现在是2017.3.9号,最新的python版本是3.6,最新的pygame是1.9.3,这两个最好都用32位的. 2. pygame1.9.3下载地址:http://www.lfd.u ...
- DevExpress的DateEdit设置显示日期和时间
1. 设置Mask.EditMask和DisplayFormat,EditFormat属性.设置为一致:'yyyy-MM-dd HH:mm'; //依照想要的显示格式设置此字符串. [csharp] ...
- Apache HttpComponents 文件上传例子
/* * ==================================================================== * * Licensed to the Apache ...
- nfs简述
参考:http://www.51lun-wen.cn/shenghuo/dianniaowangluo/diannaowangluo/czxt/Linux/200810/354248.html 1.什 ...
- Nhibernate 一对一，一对多，多对多 成功映射
前语: 在Nhibernate xml 的文件配置上,一对一和多对多的配置比较简单,容易出错的反而是一对多(多对一)上. 1.一对一关联关系的映射: <one-to-one name=" ...
- win7共享文件夹设置无密码
首先我们要启用guest账户,右键计算机 2 选择管理 3 选择本地用户和组 4 然后选择用户 5 然后选择Guest右键——属性——把账户已禁用勾掉,就可以了 6 然后点击桌面网络右键——属性 7 ...
- 错误将UIViewController当做UITableViewController来用
- subversion commit 报错A checksum mismatch occurred
期望: 2bea3643d1ea67bfa032af9dd649b1d5 实际: 5693bd753ac9ab1ddfcdd9a644b6bd02 在eclipse工程中出现此问题,则 1.com ...
- CMM已经落伍了，敏捷才是王道
首先强调一下,敏捷和有没有文档一点关系都没有.我只是对于CMM的那些文档感觉有些浪费. 看看那些文档,看看那些流程.想想那些伟大的软件作品,哪个是用CMM开发出来的? 作为测试工程师,程序员的你在CM ...
- Hbase Rowkey设计
转自:http://www.bcmeng.com/hbase-rowkey/ 建立Schema Hbase 模式建立或更新可以通过 Hbase shell 工具或者使用Hbase Java API 中 ...