JS+DIV实现拖动效果
作者:geekzsp 发布时间:2023-07-02 05:19:37
标签:JS,DIV,拖动
本文实例为大家分享了JS+DIV实现拖动效果的具体代码,供大家参考,具体内容如下
效果图
思路
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
<div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
<div class="box"></div>
</div>
<script>
var startx;
var starty;
var startLeft;
var startTop;
var titleDiv=document.getElementById("title");
var mainDiv=document.getElementById("main");
var isDown=false;
// 鼠标按下
function movedown(e){
e=e?e:window.event;
isDown=true;
startx=e.clientX;
starty=e.clientY;
startLeft=parseInt(mainDiv.style.left);
startTop=parseInt(mainDiv.style.top);
}
// 鼠标移动
function move(e){
e=e?e:window.event;
if(isDown) {
mainDiv.style.left = e.clientX - (startx - startLeft)+"px";
mainDiv.style.top = e.clientY - (starty - startTop)+"px";
}
}
// 鼠标松开
function moveup(){
isDown=false;
}
titleDiv.οnmοusedοwn=movedown;
titleDiv.οnmοusemοve=move;
titleDiv.οnmοuseup=moveup;
</script>
</body>
</html>
优化(封装,以及解决拖动问题(事件捕获))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
<div id="title"
style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
<div class="box"></div>
</div>
<script>
function Mover(title) {
this.obj = title;
this.startx = 0;
this.starty;
this.startLeft;
this.startTop;
this.mainDiv = title.parentNode;
var that = this;
this.isDown = false;
this.movedown = function (e) {
e = e ? e : window.event;
if (!window.captureEvents) {
this.setCapture();
} //事件捕获仅支持ie
// 函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标,
// 所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
// 如果鼠标光标在另一个线程创建的窗口上,只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
// 非ie浏览器 需要在document上设置事件
that.isDown = true;
that.startx = e.clientX;
that.starty = e.clientY;
that.startLeft = parseInt(that.mainDiv.style.left);
that.startTop = parseInt(that.mainDiv.style.top);
}
this.move = function (e) {
e = e ? e : window.event;
if (that.isDown) {
that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px";
that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px";
}
}
this.moveup = function () {
that.isDown = false;
if (!window.captureEvents) {
this.releaseCapture();
} //事件捕获仅支持ie
}
this.obj.onmousedown = this.movedown;
this.obj.onmousemove = this.move;
this.obj.onmouseup = this.moveup;
//非ie浏览器
document.addEventListener("mousemove", this.move, true);
}
var mover = new Mover(document.getElementById("title"));
//写两个是为了解决 ie 和非ie 浏览器关于事件捕获 的兼容性问题
</script>
</body>
</html>
来源:https://blog.csdn.net/mixi9760/article/details/52059047
0
投稿
猜你喜欢
- 禁止鼠标右键:$(document).ready(function(){ $(document).bind("contextmen
- 这篇文章主要介绍了python如何使用jt400.jar包代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备
- 我就废话不多说了,大家还是直接看代码吧!import matplotlib.pyplot as pltimport numpy as npf
- 按照惯例,年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少
- 本文实例为大家分享了Python3 Tkinkter + SQLite 实现登录和注册界面,供大家参考,具体内容如下Ubuntu14 + P
- 依托于互联网的发达,我们可以随时随地利用一些等车或坐地铁的碎片时间学习以及了解资讯。同时发达的互联网也方便人们能够快速分享自己的知识,与相同
- python判断字符串的前两个字母是否是”id"你可以使用 Python 的字符串切片来判断一个字符串的前两个
- 连接数据库链接数据库需要提供一个地址和接口即可。首先还是要导入包。from pymongo import MongoClientconn =
- XMLHttpRequest的兼容代码功能结构上大体没有什么变动主要处理了这么几条:1.不同浏览器的创建方式2.事件大小写问题(ie7的XM
- 使用爬虫时遇到etree红线问题1.首先解释一下该问题的原因是Pycharm的解释器与所要求的解释器不匹配:解决方法很简单:将软件Pycha
- 下面代码的功能是先训练一个简单的模型,然后保存模型,同时保存到一个pb文件当中,后续可以从pd文件里读取权重值。import tensorf
- 问题描述:将python脚本设置成开机自启。环境:windows7 64位前段时间,一直想把文件打包成exe文件,然后设置成开机自启,虽然感
- 今早打开 腾讯ISD的博客 ,看到一篇新的文章,《迷你屋视觉规范简介》,赶紧看了来学习。不过给我抓到问题咯,臭鱼不介意我在这说下吧:这套规范
- 关于 TensorFlowTensorFlow™ 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(N
- 当然,这些并非真正的定律,而只是一些有益的忠告,使你免陷于使用层时可能的困顿中。原来有九条定律的,我们精简掉一条,还有下面的八条:1. 如果
- python 如何获取文件夹中的全部文件在神经网络准备训练集的时候,经常需要从文件夹中读取全部图片。经常遇到的有两种方式1 os.listd
- 本文实例为大家分享了python绘制高斯曲线的具体代码,供大家参考,具体内容如下源码:import numpy as npimport ma
- 主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到“帮助”等字样上时,形状就变成求助的问号;鼠标移到可能需要较长时间等待的超链接时,
- 一、设计目的1、教学目的本课程设计是学生学习完《Python程序设计》课程后,进行的一次全面的综合训练,通过课程设计,更好地掌握使用Pyth