js拖拽效果详细讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.calculator {
background:#f00;
position: absolute; /*设置绝对定位,脱离文档流,便于拖拽*/
display: block;
width: 200px;
height: 200px;
color:#fff;
cursor: move;
left:20px; /*鼠标呈拖拽状*/
}
</style>
<body>
<div class="calculator">鼠标原来内容</div>
<div class="calculator" id="drag">鼠标拖拽内容</div>
<script>
window.onload = function() {
//拖拽功能(主要是触发三个事件:onmousedown\onmousemove\onmouseup)
var drag = document.getElementById('drag');
//点击某物体时,用drag对象即可,move和up是全局区域,也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function(e) {
var e = e || window.event; //兼容ie浏览器
var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物体被拖出浏览器可是窗口外部时,还会出现滚动条,
解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法,
可以让鼠标滑动到浏览器外部也可以捕获到事件,而我们的bug就是当鼠标移出浏览器的时候,
限制超过的功能就失效了。用这个方法,即可解决这个问题。注:这两个方法用于onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //兼容ie浏览器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物体的范围只能在浏览器视窗内,不允许出现滚动条
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移动时重新得到物体的距离,解决拖动时出现晃动的现象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
this.onmousemove = null;
this.onmouseup = null; //预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动)
//修复低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
drag.releaseCapture();
}
};
};
};
</script>
</body>
</html>
js拖拽效果详细讲解的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- js拖拽效果的实现及原理
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...
- js拖拽效果的实现
1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...
- js拖拽效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
- Oracle 10g 应用补丁PSU 10.2.0.5.180717
最近测试了一下在Oracle 10g下面(单实例下面)升级.应用补丁PSU 10.2.0.5.180717,打这个补丁的主要原因是 Oracle 将于 2019年6月启用新的SCN兼容性,并且由于Bi ...
- 全民抵制“辱华”品牌秀,D&G神回复:呵呵~ 那不是我!
### 补发一下,前写天写的: 就在今天下午,有网友爆出知名品牌 Dolce&Gabbana(杜嘉班纳)的设计师兼创始人Stefano Gabbana在ins上公然发表辱华言论. 下面截图 可 ...
- elasticsearch系列一:elasticsearch(ES简介、安装&配置、集成Ikanalyzer)
一.ES简介 1. ES是什么? Elasticsearch 是一个开源的搜索引擎,建立在全文搜索引擎库 Apache Lucene 基础之上 用 Java 编写的,它的内部使用 Lucene 做索引 ...
- HBase源码实战:CreateRandomStoreFile
/* * * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agre ...
- $.extend()浅拷贝深拷贝
参考网址:http://bijian1013.iteye.com/blog/2255037 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.ex ...
- SDOI2019R1游记
差点退役,真是开心 Day -2 吐了一晚上,差点死掉 被拉去医院打针,结果蛇皮的被扎了两针,真是好疼啊嘤嘤嘤 决定第二天在家里咕一天 Day -1 结果在家里也得做\(loli\)昨天的不知道从哪里 ...
- 【Atcoder Grand Contest 011 F】Train Service Planning
题意:给\(n+1\)个站\(0,\dots,n\),连续的两站\(i-1\)和\(i\)之间有一个距离\(A_i\),其是单行(\(B_i=1\))或双行(\(B_i=2\)),单行线不能同时有两辆 ...
- 美团--Quake全链路压测平台
原文:连接: https://tech.meituan.com/2018/09/27/quake-introduction.html 开源分布式监控Cat: https://github.com/di ...
- flask(一)之路由和视图
01-介绍 Flask 是一个 Python 实现的 Web 开发微框架,同时具有很强的扩展能力. 02-第一个flask程序 # 初始化 from flask import Flask, url_f ...
- Math的一些方法
Math.abs(数值) 把()内的值变为正数 Math.ceil(4.3) 向上取整 // 5 Math.floor(4.3) 向下取整 // 4 Math.round(4.3) 四舍五入取整 // ...