原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置。

示例代码:

 <!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会发现有问题。

那是因为当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认的文字拖拽效果。

解决方案:
标准:用return false; 阻止事件默认行为
非标准ie :用setCapture()设置全局捕获,当我们给一个元素设置全局捕获以后,那么这个元素就会监听后续发生的所有事情,当有事件发生的时候,就会被当前设置了全局捕获的元素所触发。
 
setCapture()兼容性:
ie : 有,并且有效果
ff : 有,但是没效果
chorme : 没有
 
具体代码如下:
 <!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----拖拽的更多相关文章

  1. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  10. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

随机推荐

  1. linux 硬件设备文件名

  2. C#Copy

    1.浅拷贝(值类型): public class LightCopy { public int Val { get; set; } public LightCopy(int ival) { Val = ...

  3. python 实现一个双色球生成程序

    最近学习Python的Random函数,就顺手写一个随机数的双色球程序,开发环境:python2.7 , 附上源代码如下: # _*_ coding:utf- _*_ import random qi ...

  4. django1.8forms读书笔记

    一.HttpRequest对象的一些属性或方法 request.path,The full path, not including the domain but including the leadi ...

  5. cocos2dx 3.x ccPositionTextureColor_vert与ccPositionTextureColor_noMVP_vert

    在cocos2dx 2.x中,如果我们要对sprite更换片段shader,写成: myProgram->initWithByteArrays(ccPositionTextureColor_ve ...

  6. activiti表

    act_re_deployment #部署对象表 act_re_prodef  #流程定义表 act_ge_bytearray #资源文件表 act_ge_property   #主键生成策略表 ac ...

  7. Effective C++ Item 42 了解 typename 的双重意义

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:声明 template 參数时,前缀keyword class 和 typename ...

  8. 如何把scratch转成一个swf文件或者exe执行文件

    scratch作为一款启蒙用的积木式编程软件,非常受人欢迎,但是,现在有一个问题就是,无法将之转变成一个可执行文件,以便和周边的人们分享. 我个人认为把scratch转变为一个可执行的exe文件,并不 ...

  9. transitionFromViewController方法的使用

    转自:http://blog.sina.com.cn/s/blog_7b9d64af0101c2vm.html 1.背景   iOS 5.0 以前 ,我们在一个视图控制器中会用addSubView方法 ...

  10. Swift语言 简明基础 代码演示样例

    开发环境: Mac.Xcode6.0 下面内容均可创建ios common line项目来測试 1.Hello World演示样例 使用xcode创建新的common line项目,查看主文件main ...