点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果：
思路：
利用onmousedown事件实现拖拽。首先获得鼠标横坐标点和纵坐标点到div的距离，然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离。然后在判断不让DIV移出可视区，然后再赋予DIV的位置。最后关闭鼠标onmouseup事件。
代码：
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background: #00FFFF;
position: absolute;
border: 1px solid;
}
</style>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div1');
var disX = 0;
var disY = 0;
document.onmousedown = function (ev) { //鼠标按下
var oEvent = ev || event; //判断浏览器兼容
disX = oEvent.clientX - div1.offsetLeft; //鼠标横坐标点到div的offsetLeft距离
disY = oEvent.clientY - div1.offsetTop; //鼠标纵坐标点到div的offsetTop距离
document.onmousemove = function (ev) { //鼠标移动
var oEvent = ev || event;
var l = oEvent.clientX - disX; //获取div左边的距离
var t = oEvent.clientY - disY; //获取div上边的距离
if (l < 0) { //判断div的可视区，为避免DIV失去鼠标点
l = 0;
}
else if (l > document.documentElement.clientWidth - div.offsetWidth) {
l = document.documentElement.clientWidth - div.offsetWidth;
}
if (t < 0) {
t = 0;
}
else if (t > document.documentElement.clientHeight - div.offsetHeight) {
t = document.documentElement.clientHeight - div.offsetHeight;
}
div.style.left = l + 'px'; //确定DIV的左边位置
div.style.top = t + 'px'; //确定DIV的上边位置
}
document.onmouseup = function () { //当鼠标松开后关闭移动事件和自身事件
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）的更多相关文章
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- JS拖拽div（移动）
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 微信小程序 -- 基于 movable-view 实现拖拽排序
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...
- 完美实现鼠标拖拽事件，解决各种小bug，基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
随机推荐
- WPF Interaction框架简介（一）——Behavior
在WPF 4.0中,引入了一个比较实用的库——Interactions,这个库主要是通过附加属性来对UI控件注入一些新的功能,除了内置了一系列比较好用的功能外,还提供了比较良好的扩展接口.本文这里简单 ...
- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- static_cast ，reinterpret_cast
用法:static_cast < type-id > ( expression ) 该运算符把expression转换为type-id类型,但没有运行时类型检查来保证转换的安全性.它主要有 ...
- 某公司java面试经历
为什么说某公司.由于确实面完了最后挂了回来也没记住公司叫啥名字.是老乡兼好友内推去的小公司,名字有点长,所以也没记住. 公司确实太小,所说是外包公司.然后面回来后跟ACM的前学长说了,他们仅仅说所以不 ...
- [转]Data Flow How-to Topics (SSIS)
本文转自:http://technet.microsoft.com/en-us/library/ms137612(v=sql.90).aspx This section contains proced ...
- vim配置python开发环境(转)
安装 因为许多Unix衍生系统已经预装了Vim,我们首先要确认编辑器是否成功安装: vim --version 如果已经安装了,你应该看到类似下面的文字: VIM - Vi IMproved 7.3 ...
- http://www.cnblogs.com/alipayhutu/archive/2012/08/16/2643098.html
http://www.cnblogs.com/alipayhutu/archive/2012/08/16/2643098.html
- java实现 tf-idf
1.前言 TF-IDF(term frequency–inverse document frequency)是一种用于信息检索与数据挖掘的常用加权技术.TF意思是词频(Term Frequency), ...
- supervise 用来监控服务，自动启动
Atong介绍的这个工具,挺好用的.supervise 官方网站: https://cr.yp.to/daemontools.html cd /data/test cat test.c #includ ...
- Linux 静态链接库和动态连接库
(0)文件夹 VMware 下安装Ubuntu的吐血经历 零基础学习Shell编程 Linux下的makefile的妙用 Linux调试神器 -- gdb 十分钟学会Python的基本类型 Linux ...