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实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
随机推荐
- CDOJ 1060 秋实大哥与快餐店 字典树 水题
题目链接 B - 秋实大哥与快餐店 Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Sub ...
- Python字典实现
这篇文章描述了在Python中字典是如何实现的. 字典通过键(key)来索引,它可以被看做是关联数组.我们在一个字典中添加3个键/值对: >>> d = {'a': 1, 'b': ...
- CSS 处理溢出强行换行
CSS折行样式 word-break:break-all;允许单词拆分折行 word-break:keep-all;只能在半角空格或连字符处换行. word-wrap:break-word;在长单词或 ...
- sqli-labs（23）
基于get的过滤了的注入 0X1测试闭合 /?id=' http://127.0.0.1/sql1/Less-23/?id=1%27%27 0X02 然后就是组合拳的操作了 未报错 那么应该是’闭合 ...
- mysql 数据增删改的总结
一.在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 1.使用INSERT实现数据的插入2.UPDATE实现数据的更新3.使用DELETE实现数据的删除4.使用SELEC ...
- Spring容器的基本使用
1)如何将一个Bean组件交给Spring容器 方法:在applicationContext.xml中添加以下定义 <bean id = “标识符” class = “Bean组件类型”> ...
- curl下载文件时自动创建目录
有时候需要自动创建多级目录 按照如下格式即可 curl -o d:/lei/demo/test.jpg --create-dirs http://img.7160.com/uploads/allimg ...
- String 部分源码分析
String 无参数构造函数 /** * 底层存储字符串的目标字节数组, * Jdk 8 之前都是字符数组 private final char[] value; */ @Stable private ...
- 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_01.mybatis课程介绍
- HTML学习之==>HTML标签
前端的三把利器: HTML:一个人 CSS:这个人的衣服 JS:这个人的行为 HTML(超文本标记语言) html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成.html代码就是一大 ...