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 低版本的火狐有bug
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.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哈哈~
相关推荐
-
Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. html代码: <div id="div2"> <div id="div1"> </div> </div> css代码: <style type="text/css"> #div1 { width: 1
-
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { v
-
Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理)
拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. <div id="div1"> </div> 实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧. <style t
-
Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题. 实际上在我们开发中,页面上会有许多的元素组成,不可能就一个div
-
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov
-
基于JavaScript实现类似于百度学术高级检索功能
百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大: 下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用jquery: <p class="fl srh-btn"> <input type="submit" class="srh-submit" style="height:px" valu
-
JavaScript截取指定长度字符串点击可以展开全部代码
文章的篇幅往往不是那么恰到好处,如果以原有的篇幅展示,那么有可能会影响网页的布局或者美观度,这个时候就要根据情况适量截取一定的字符串,以适应布局,不过当点击一个按钮的时候依然可以展开全部的内容,下面就通过一个实例详细介绍一下如何实现此效果,代码示例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten
-
基于JavaScript实现鼠标向下滑动加载div的代码
废话不多说了,关键代码如下所示: <!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> <title> new
-
JavaScript之事件委托实例(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite
-
JavaScript中实现无缝滚动、分享到侧边栏实例代码
废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍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&