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移出可视区,然后再 ...
随机推荐
- Java 常用数据结构深入分析（Vector、ArrayList、List、Map）
线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文试图通过简单的描述,向读者阐述各个类的作用以 ...
- 高性能MySQL笔记-第1章MySQL Architecture and History-001
1.MySQL架构图 2.事务的隔离性 事务的隔离性是specific rules for which changes are and aren’t visible inside and outsid ...
- 替换应用程序exe图标，主要使用BeginUpdateResource，UpdateResource API函数
替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程 ...
- JVM内存区域划分
前言 Java程序的运行是通过Java虚拟机来实现的.通过类加载器将class字节码文件加载进JVM,然后根据预定的规则执行.Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同 ...
- 关于Struts2的Validator的配置找不到DTD
看教材的时候写的DTD是 <!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.3//EN&q ...
- Iterator的remove方法可保证从源集合中安全地删除对象（转）
如果对正在被迭代的集合进行结构上的改变(即对该集合使用add.remove或clear方法),那么迭代器就不再合法(并且在其后使用该迭代器将会有ConcurrentModificationExcept ...
- mac 下tomcat启动报错 unknown host
解决方法:sudo scutil --set HostName localhost
- windows下的文件遍历（使用CFindFile）
这个我一直都很想做了,前两天开始准备,查找了一下CFindFile的资料,然后把思路理清楚,就直接开始做了. 文件系统是一个操作系统以一部分,所以想文件操作,基本上就要依赖于操作系统提供的接口函数. ...
- java遍历Map时remove删除元素
public class T { /** * @param args */ public static void main(String[] args) { // TODO Auto-generate ...
- linux下svn的常用代码【转】
转自:http://www.2cto.com/os/201205/130192.html 1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例 ...