拖拽功能by javascript 和 react 两种实现方法
使用鼠标移动图片或者移动图像怪有意思的,那这个移动的效果是怎么实现的呢?
在拖动的过程中,我们会涉及到鼠标向下按,以及移动图形,还有我们松开这几个步骤。
当我们将鼠标向下按的时候,我们鼠标点的这个动作,其实是有一个事件的,那如何确定鼠标
点的位置呢?
我们知道clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。
这样我们就知道了鼠标点的坐标。
通过offsetLeft,offsetTop,我们可以求得对应图形左上角相对于浏览器的位置,即为我们移动图形的初始位置。
当我们松开这个图形的时候,通过clientX ,clientY获得当前鼠标的位置,我们可以通过鼠标移动的距离求得最后
我们图形的偏移量。
还有一个需要了解的是cursor这个属性,当它为defaulf的时候,它会是默认光标,为move的时候,为表示对象可以移动。
先看看我们原生js实现可拖拽的方法
在react中我们同样可以实现可拖拽的方法
我们可以定义一个drag组件,将组件渲染在我们的根元素中。
我们返回的这个组件,它本身很多东西都是可变的
刚开始的时候,我们要初始化鼠标点和图形左上角的坐标
当鼠标向下按的时候,我们会有图像或者鼠标的偏移量
最后是我们鼠标移动和停止的事件。
此博客升华自:http://www.jq22.com/webqd1348及https://blog.csdn.net/hahahahahahahaha__1/article/details/80694175
完整的demo见我的github:https://github.com/JserJser/reactWebApp/tree/master/demo
拖拽功能by javascript 和 react 两种实现方法的更多相关文章
- duilib中控件拖拽功能的实现方法(附源码)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- RCP:拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- 类似于PLC上升沿的TRIO代码示例
需求: 一个自复位按钮,控制灯泡的亮与灭(按钮按一次灯亮,再按一次灯灭依次循环). 简短的代码,若大家有更好的思路可以评论区留言. DIM in_button,op_lamp,var_middl ...
- linux内核分析字符集实践报告
- <<浪潮之巅>>阅读笔记一
第一次的阅读就想读这本书的,却因为很多愿意一直拖到现在,因为听说这本书在李开复先生 的微博上有推荐,更是增加了我的阅读兴趣.可能是因为在网上找的电子版的原因,通篇阅读的速度很快,但是没有纸质数那种细嚼 ...
- 作业二 —— 分布式版本控制系统Git的安装与使用
作业要求源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 1.安装Git,配置用户名与邮箱. 安装Windows版的Git ...
- Linux下运行Shell脚本或者可执行文件Executable方法
绝对路径 /xxx/xxx/something.sh /xxx/xxx/executable 相对路径 ./something.sh ./executable 注意:前边得加./,可不是像window ...
- eclipse里面找不到databaseexplorer
在window==>show view==>Other==>Data Management==>Database explorer配置:在右下方点击Database Sourc ...
- Node params和query的Get请求传参
//1:加载http express框架//2:创建服务器const http = require("http");const express = require("ex ...
- centos网络yum源的安装
CentOS使用EPEL YUM源EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适用于RHE ...
- BZOJ4385[POI2015]Wilcze doły——单调队列+双指针
题目描述 给定一个长度为n的序列,你有一次机会选中一段连续的长度不超过d的区间,将里面所有数字全部修改为0.请找到最长的一段连续区间,使得该区间内所有数字之和不超过p. 输入 第一行包含三个整数n,p ...
- spring cloud 入门系列一:初识spring cloud
最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubbo和spring cloud之间我选择了从spring cloud,主要有如下几种原因: dubbo主要专注于微服务中的一个环节--服务 ...