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实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
随机推荐
- Tire树简介
又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用:用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...
- [THUSC2017]杜老师：bitset+线性基
算法一(50pts) 分析 有一个很显然的暴力做法,对于区间内的每个数开个bitset,然后暴力分解质因数.如果对于一个数,它的一个质因子的指数是奇数,那么就把bitset的对应位设成\(1\).答案 ...
- 利用IKVM在C#中调Java程序（总结+案例）
IKVM.NET是一个针对Mono和微软.net框架的java实现,其设计目的是在.NET平台上运行java程序.本文将比较详细的介绍这个工具的原理.使用入门(如何java应用转换为.NET应用.), ...
- Oracle dba角色和sysdba的区别
如果用户需要远程sysdba的方式登陆,需要grant sysdba权限,登陆后以sys用户执行命令,需要验证密码文件. 密码文件如果是从12c之前的老版本同步过来,需要重建12c格式的密码文件. d ...
- centos7 升级php版本
centos7 默认PHP5.4,版本太低,很多要求至少PHP5.5 1.查看已经安装的PHP组件 yum list installed| grep php php.x86_64 -.el7 @bas ...
- 在vi vim中使用正则表达式与 普通perl正则的区别?
参考这篇文章很好 vim中的正则表达式常用的命令有种, 即搜索和替换 /: 搜索 :s 替换 在vim中的正则表达式和perl编程的正则表达式还是有区别的: 正则表达式中的内容包括: 字面字符... ...
- DNS 搜索 - dig 命令
dig 命令_互动百科 示例: # 全部 dig www.zjffun.com # 只显示 ANSWER SECTION dig www.zjffun.com +noall +answer
- What is the difference between a URI, a URL and a URN?
资料: URI: URL: URN:
- Linux监控命令之==>free
一.命令说明 free 命令显示系统内存的使用情况:包括物理内存.交换内存(swap)和内核缓冲区内存 二.参数说明 -b -k -m -g:分别以字节.KB.MB.GB为单位显示内存使用情况 -l: ...
- Java ——异常处理
本节重点思维导图 详细戳——> 异常处理