js面向过程-拖拽
1.步骤分析：
1.1 获取id
1.2 当鼠标点击时执行的js
1.3当鼠标移动时执行的js
1.4当鼠标放开时执行的js
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽</title>
<style>
#div1 {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('1.png');
}
</style> <script>
window.onload = function() {
// 获取div
var oDiv = document.getElementById('div1');
// 当鼠标点击时执行的js
oDiv.onmousedown = function() {
// 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)
var disX = event.clientX - oDiv.offsetLeft;
var disY = event.clientY - oDiv.offsetTop;
// 当鼠标移动时执行的js
document.onmousemove = function() {
// 拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)
oDiv.style.left = event.clientX - disX + 'px';
oDiv.style.top = event.clientY - disY + 'px';
};
// 当鼠标放开时执行的js
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
3.核心代码
3.1 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)
var disX = event.clientX - oDiv.offsetLeft;
var disY = event.clientY - oDiv.offsetTop;
3.2拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)
oDiv.style.left = event.clientX - disX + 'px';
oDiv.style.top = event.clientY - disY + 'px';
js面向过程-拖拽的更多相关文章
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
- js面向过程改写成面向对象--通用方法
响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...
- js实现鼠标拖拽div-------Day44
假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
随机推荐
- luogu 4059 [Code+#1]找爸爸 动态规划
Description 小A最近一直在找自己的爸爸,用什么办法呢,就是DNA比对.小A有一套自己的DNA序列比较方法,其最终目标是最 大化两个DNA序列的相似程度,具体步骤如下:1.给出两个DNA序列 ...
- 【canvas学习笔记八】像素操作
ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...
- 2、electron进程
electron核心我们可以分成2个部分,主进程和渲染进程. 主进程: 主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁. Electron 运行 package.json 的 ma ...
- 构造Map并对其排序
#构造Map并对其排序 attr_tul = ['a','b','c','d','e','f'] one_tul = [,,,,,] one_dic = {} for i in range(len(a ...
- 用apicloud+vue的VueLazyload实现缓存图片懒加载
<script src="../../script/vue-lazyload.js"></script><img v-lazy="remot ...
- 《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记
Coursera课程<Using Python to Access Web Data> 密歇根大学 Week4 Programs that Surf the Web 12.3 Unicod ...
- Windows下GIT的用户密码修改
Windows下GIT的用户密码修改
- c++ 创建 uuid guid
如果没安装,先安装: [root@localhost]# yum install libuuid-devel #include "uuid/uuid.h" 引用 libuuid.s ...
- 别把&和nohup混为一谈, 根本不是同一个东西好不好 ------ 聊聊./a.out & , nohut ./a.out , nohup ./a.out &的区别
在第一家公司工作的时候, 我认识了&,在第二家公司工作的时候, 我认识了nohup, 这就是渊源. 随后, 我就一直糊涂用他们, 但并不懂这两个东西. 网上很多地方是乱扯, 瞎复制, 为什 ...
- 实体类的[Serializable]标签造成WebAPI Post接收不到值
WebAPI: [HttpPost] public HttpResponseMessage test([FromBody]List<Class1> list) { return Commo ...