Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...

我们看看之前的拖拽在周围有东西的时候会出现什么问题？在高级浏览器中不会有啥问题，我们放到IE7下面测试一下，问题就出来了。如图

我们可以很清楚的看到，文字都已经被选中了。那这个用户体验很不好，用起来也不方便。顺便提一下，我们之前加了一个return false;帮我们解决了很多问题，如果去掉这个的话,chrome也会出现一样的问题。那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题。

实际上在我们开发中，页面上会有许多的元素组成，不可能就一个div，在你拖动的时候其他地方是不会被选中的，比如说百度地图，大家可以玩玩。
那我们如何做到这样子的一个拖拽呢？能够解决IE7的问题呢？

解决方案：

我们可以用一个小技巧来解决，这个技巧只有在IE6-8支持，实际上就能解决我们的问题，因为其他的浏览器用return false; 就够了。下面看看是什么技巧

就是事件捕获！！简单说明下附上代码

<title></title><script type="text/javascript">window.onload=function(){var oBtn=document.getElementById("btn");oBtn.onclick=function(){alert(1);};// 网页上所有地方的上的事件都集中到一个按钮身上 IE 专用
                oBtn.setCapture(); // 点击哪里都是弹a
            }</script></head><body><input type="button" id="btn" value="按钮" /></body>

实际上就是页面上所有地方上的事件都集中到一点，点击页面任何位置都会弹出a，也就是setCapture()作用。

把所有事件都集中到一个按钮来处理！！这个就只有IE兼容！！

这样，让我来看看如何修改之前的代码。。。。

我们首先把所有的document改回div，记不记得我们之前讲过因为鼠标拖动的快点就容易拖出div，所以把事件都加在document上。

而现在就不必这样做了，给我们之前的div加上一个setCapture()看看效果。

<body>IE 7 中的文字会被选中 ，<br />如果不加return false chrome ff 也会有这样的问题 asdsadad<br /><div id="div1">asdsadad asdsadad asdsadad</div>asdsadadasdsadadasdsadad</body>

<style type="text/css">#div1 {width: 200px;height: 200px;background: red;position: absolute;}</style>

<script type="text/javascript">// 拖拽空div 低版本的火狐有bugwindow.onload = function() {var oDiv = document.getElementById("div1");var disX = 0;var disY = 0;oDiv.onmousedown = function(ev) {var oEvent = ev || event;disX = oEvent.clientX - oDiv.offsetLeft;disY = oEvent.clientY - oDiv.offsetTop;oDiv.onmousemove = function(ev) {var oEvent = ev || event;var oDivLeft = oEvent.clientX - disX;var oDivTop = oEvent.clientY - disY;oDiv.style.left = oDivLeft + 'px';oDiv.style.top = oDivTop + 'px';};oDiv.onmouseup = function() {oDiv.onmousemove = null;oDiv.onmouseup = null;};oDiv.setCapture();return false; // 阻止默认事件,解决火狐的bug
        };};</script>

这个时候实际上我们拖动在快也不会出现鼠标拖出Div的问题了。实际上加了setCapture()以后，整个网页上所有的事件都会聚集在这一个div上面。

其实现在，这个文字就不会被选中了。为什么呢？因为现在网页上的文字，图片的所有事件都在div上了，他们已经得不到事件了！所以自然他们就不会被选中了。

当然现在又有个问题？？？？你会发现当你要试图去选中那些文字的时候，就选不中了。

如何是好，事件都集中在div上了。。。!!!!!

所以呢，其实这个setCapture()就像一把锁，现在都锁住了，事件都在div上面，现在解锁就可以了那相对应的就有 releaseCapture();

releaseCapture(); 就是释放捕获。实际上在鼠标抬起的时候加上就可以了。

window.onload = function() {var oDiv = document.getElementById("div1");var disX = 0;var disY = 0;oDiv.onmousedown = function(ev) {var oEvent = ev || event;disX = oEvent.clientX - oDiv.offsetLeft;disY = oEvent.clientY - oDiv.offsetTop;oDiv.onmousemove = function(ev) {var oEvent = ev || event;var oDivLeft = oEvent.clientX - disX;var oDivTop = oEvent.clientY - disY;oDiv.style.left = oDivLeft + 'px';oDiv.style.top = oDivTop + 'px';};oDiv.onmouseup = function() {oDiv.onmousemove = null;oDiv.onmouseup = null;oDiv.releaseCapture();};oDiv.setCapture();return false; // 阻止默认事件,解决火狐的bug
        };};

现在就能解决文字选中的问题了。最后我们坐下兼容，实际上来说这个setCapture() 是不兼容的，放在其他浏览器就错了。

那么很简单，我们只要合并这次与上一次的代码就可以了，兼容嘛做个if判断就好。最后附上整理好的代码

<script type="text/javascript">window.onload = function() {var oDiv = document.getElementById("div1");var disX = 0;var disY = 0;oDiv.onmousedown = function(ev) {var oEvent = ev || event;disX = oEvent.clientX - oDiv.offsetLeft;disY = oEvent.clientY - oDiv.offsetTop;if (oDiv.setCapture) {oDiv.onmousemove = mouseMove;oDiv.onmouseup = mouseUp;oDiv.setCapture(); // IE 7 下文字就不会被选中 其实就是文字或图片得不到事件} else {document.onmousemove = mouseMove;document.onmouseup = mouseUp;}function mouseMove(ev) {var oEvent = ev || event;var oDivLeft = oEvent.clientX - disX;var oDivTop = oEvent.clientY - disY;oDiv.style.left = oDivLeft + 'px';oDiv.style.top = oDivTop + 'px';}function mouseUp(ev) {this.onmousemove = null;this.onmouseup = null;if (oDiv.releaseCapture) {oDiv.releaseCapture(); // 释放捕获
                        }}return false; // 阻止默认事件,解决火狐的bug
                };};</script>

好了，都搞定了 O(∩_∩)O哈哈~

转载于:https://www.cnblogs.com/IcemanZB/p/4228009.html

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...相关推荐

Javascript 匀速运动停止条件——逐行分析代码，让你轻松了运动的原理
原文:Javascript 匀速运动停止条件--逐行分析代码,让你轻松了运动的原理我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 < ...
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
javaScript数组：点歌台、抽奖功能（分析+代码）
题目:点击开始按钮,进行随机抽取,点击停止按钮,确定抽到的人是谁(该思想可用于点歌.点名.抽奖系统) 效果图: 思路分析: (1)创建一个数组arr,用来存放姓名名单 (2)创建一个点击事件,点击开始 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
el-tree 拖拽互换位置_那些我们与UI交互的动作（三·拖拽）
交互动作的直觉形成于『人与实物』的互动中. 在物理世界:接触物体一定有感觉. 在游戏里:与物体交互一定可以看到变化. 拖拽动作拖拽对应的真实动作就是拖拽,就是『把物体从这里拿到那里』. 多么简单直接 ...
一篇文章把你带入到JavaScript中的闭包与高级函数
在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...
HTML5电子书翻页效果代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...相关推荐

最新文章

热门文章