js学习笔记29----拖拽
原理：先计算鼠标与拖拽目标的左侧距离 跟 上面距离，再计算拖动后的位置。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>拖拽原理</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#moveBlock{
width:100px;height:100px;background-color:#f00;position:absolute
}
</style>
<script> window.onload = function(){
var oDiv = document.getElementById("moveBlock");
oDiv.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft; //计算鼠标与当前div左侧距离
var disY = ev.clientY - this.offsetTop; //计算鼠标与当前div顶侧距离 document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + "px";//计算拖动后与左侧的距离
oDiv.style.top = ev.clientY - disY + "px";//计算拖动后与顶部的距离
} document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
} }
} </script>
</head>
<body>
<div id="moveBlock"> </div>
</body>
</html>
我们运行上面的代码如果只是一个单纯的div没什么问题，但是如果同时有文字选中之后，再拖动div会发现有问题。
那是因为当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>拖拽改进版</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#moveBlock{
width:100px;height:100px;background-color:#f00;position:absolute
}
</style>
<script> window.onload = function(){
var oDiv = document.getElementById("moveBlock");
oDiv.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
//设置全局捕获
if(oDiv.setCapture){
oDiv.setCapture();
} document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + "px";
oDiv.style.top = ev.clientY - disY + "px";
} document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
//释放事件捕获 releaseCapture();
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
} return false; //阻止事件默认行为 }
} </script>
</head>
<body>
<p>
原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>
解决： 用return false; 阻止事件默认行为.
</p>
<div id="moveBlock"> </div>
</body>
</html>
封装成一个拖拽函数：
<!DOCTYPE html>
<html lang="en">
<head>
<title>拖拽封装</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#moveBlock{
width:100px;height:100px;background-color:#f00;position:absolute
}
</style>
<script> window.onload = function(){ var oDiv = document.getElementById("moveBlock");
drag(oDiv); function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop; if(obj.setCapture){
obj.setCapture;
} document.onmousemove = function(ev){
var ev = ev || event;
obj.style.left = ev.clientX - disX + "px";
obj.style.top = ev.clientY - disY + "px";
} document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
//释放事件捕获 releaseCapture();
if(obj.releaseCapture){
obj.releaseCapture();
}
} return false; //阻止事件默认行为 }
} } </script>
</head>
<body>
<p>
原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>
解决： 用return false; 阻止事件默认行为.
</p>
<div id="moveBlock"> </div>
</body>
</html>
js学习笔记29----拖拽的更多相关文章
- 纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
随机推荐
- 重写 View 的 Touch 方法，实现一个酷炫的九宫格图片
前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家
- Chrome 错误代码：ERR_UNSAFE_PORT
最近在用Nginx发布多个站点测试,使用了87.88端口, 88端口访问正常,87端口就怎么也访问不了, 点击更多,提示错误代码:ERR_UNSAFE_PORT 不安全的端口?尼玛就只靠端口就能解决不 ...
- Linux下C结构体初始化
1.前言 今天在公司看一同事写的代码,代码中用到了struct,初始化一个struct用的是乱序格式,如下代码所示: typedef struct _data_t { int a; int b; }d ...
- if else和switch的效率
switch和if-else相比,由于使用了Binary Tree算法,绝大部分情况下switch会快一点,除非是if-else的第一个条件就为true. 说实话 我也没有深入研究过这个问题的根源 ...
- 多主机共享ssh Public/Private Key
前期服务器比较少,所有代码都放在github的私库中,在自己的github 设置中设置SSH keys就可以拉下相应的库中的代码到本地与服务器了,但是最近服务器多家了几台,每台都生成key加到gith ...
- wpf程序线程与UI内容交互
在UI线程里执行复杂的操作,会造成UI假死.常用的解决方法是开2个线程. 而新线程要调用UI里的东西,必须这么用: this.Dispatcher.Invoke(content);
- appium安卓自动化的 常用driver方法封装
appium安卓自动化的 常用driver方法封装 做安卓自动化的时候,很多方法写起来会造成代码冗余,把这部分封装起来 ,添加到androidUI工具类里,随时可调用 都放在这个类下面: @Compo ...
- SharePoint自动化系列——通过PowerShell创建SharePoint Site Collection
通过PowerShell创建SharePoint Site Collection,代码如下: Add-PSSnapin microsoft.sharepoint.powershell function ...
- MySQL 日期计算
MySQL提供了几个函数,可以用来计算日期,常用的例子就是,计算年龄或提取日期部分. 1. 计算年龄: mysql中要想计算一个人的年龄,相当于当前日期的年和出生日期之间的差.如果当前日期的日历年比出 ...
- spring报错：Caused by: java.lang.IllegalStateException: Cannot convert value of type for property : no matching editors or conversion strategy found
原因分析:是因为类返回的类型跟期望的类型没有继承关系,返回的类型就SqlMapClient,它是通过实现了FactoryBean<SqlMapClient>接口的SqlMapClientF ...