js事件处理相关-实现一个div的拖拽
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#divTest {
width : 200px;
height : 200px;
background-color : red;
border : 1px solid #00ffff;
position : absolute;
}
</style>
</head>
<body>
测试一下
<div id="divTest">
</div>
<script type="text/javascript">
var oDiv = document.getElementById("divTest");
oDiv.onmousedown = function (en) {
var ev = ev || event;
var disX = en.clientX - oDiv.offsetLeft;
var disY = en.clientY - oDiv.offsetTop;
if (oDiv.setCapture) {
oDiv.setCapture();
}
document.onmousemove = function (en) {
var ev = ev || event;
oDiv.style.top = en.clientY - disY + 'px';
oDiv.style.left = en.clientX - disX + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
if (oDiv.releaseCapture) {
oDiv.releaseCapture()
}
}
return false;//阻止默认行为（如果页面中有文字，则会默认拖动文字），ie8及一下不行
}
</script>
</body>
</html>
注意点：
1.获取当前div离上方和左方的距离之前使用了oDiv.style.left，获取不到
2.注意后面加px，老是容易忘记，然后还找不到错误原因浪费事件
3.
4.以后还是得实践，一味的看视频效果并不好，一定要明确最终目的，是需要掌握而不是单纯的看完视频。
js事件处理相关-实现一个div的拖拽的更多相关文章
- 实现一个div的拖拽效果
实现思路: 鼠标按下开始拖拽 记录摁下鼠标时的鼠标位置以及元素位置 拖动鼠标记下当前鼠标的位置 鼠标当前位置-摁下时鼠标位置= 鼠标移动距离 元素位置= 鼠标移动距离+鼠标摁下时元素的位置 class ...
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- day23—JavaScript实现DIV盒子拖拽（原生方式）
转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- Android高级控件（六）——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- 自制一个H5图片拖拽、裁剪插件（原生JS）
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
随机推荐
- React事件属性
一.简介 二.滚动例子,滚动改变颜色 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta c ...
- Golang哲学思想
Golang是一门新语言,经过几年发展,慢慢地也已经被许多大公司认可.最大的特点是速度快,并发性好,与网络的功能结合好,是一门服务端语言,号称“网络时代的新语言”:另外还是一个编译型的Python.不 ...
- ActionResult
ActionResult public abstract class ActionResult { public abstract void ExecuteResult(ControllerConte ...
- SpringBoot配置属性之Server
SpringBoot配置属性系列 SpringBoot配置属性之MVC SpringBoot配置属性之Server SpringBoot配置属性之DataSource SpringBoot配置属性之N ...
- kafka安装及常用命令
kafka是一个开源的分布式消息队列 他提供可靠的集群容错机制,并保证故障切换时的数据完整性. 无论从性能.可靠性.易用性都强过ActiveMQ(client的API感觉还是不如ActiveMQ好用, ...
- minhash
minhash是一种基于jaccard index 相似度的算法.属于LSH(Location Sensitive Hash)家族中的一员. jaccard index :有两个集合A={a , b ...
- c# 文件简繁体转换
C# 文件简繁体转换 简繁体转换: 方案一: 准确性高,耗性能 方案二: 准确性低,效率高 1 using Microsoft.International.Converters.Tradition ...
- zabbix接口调用注意事项--Python
不知道该怎么写,但是明显得写点什么,担心时间长了,忘记,再回顾时又要重新摸索一遍 一.Request:post params: 1. 第一层的参数处理: 第一层的参数设置为变量 2. 其他层参数格式不 ...
- Linux内核系列—C语言中内嵌汇编 asm __volatile__，asm__volatile_【转】
转自:http://www.bkjia.com/Androidjc/1109412.html 在内嵌汇编中,可以将C语言表达式指定为汇编指令的操作数,而且不用去管如何将C语言表达式的值读入哪个寄存器, ...
- YTU 2621: B 继承 圆到圆柱体
2621: B 继承 圆到圆柱体 时间限制: 1 Sec 内存限制: 128 MB 提交: 313 解决: 240 题目描述 定义了Circle圆形类,在此基础上派生出Cylinder圆柱体类. ...