javascript动画之模拟拖拽效果篇(2)

<button>按钮一</button> <button>开启按钮一的全局捕获</button> <script> btn1.onclick = function(){ alert(1); } btn2.onclick = function(){ if(btn1.setCapture){ if(btn2.innerHTML.charAt(0) == '开'){ btn1.setCapture(); btn2.innerHTML = '关闭按钮一的全局捕获'; }else{ btn1.releaseCapture(); btn2.innerHTML = '开启按钮一的全局捕获'; } } } </script>

  通过在IE浏览器设置全局捕获来达到取消文字原生拖放的默认行为

<div>测试文字</div> <script> test.onmousedown = function(e){ e = e || event; //获取元素距离定位父级的x轴及y轴距离 var x0 = this.offsetLeft; var y0 = this.offsetTop; //获取此时鼠标距离视口左上角的x轴及y轴距离 var x1 = e.clientX; var y1 = e.clientY; document.onmousemove = function(e){ e = e || event; //获取此时鼠标距离视口左上角的x轴及y轴距离 x2 = e.clientX; y2 = e.clientY; //计算此时元素应该距离视口左上角的x轴及y轴距离 var X = x0 + (x2 - x1); var Y = y0 + (y2 - y1); //将X和Y的值赋给left和top,使元素移动到相应位置 test.style.left = X + 'px'; test.style.top = Y + 'px'; } document.onmouseup = function(e){ //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可 document.onmousemove = null; //释放全局捕获 if(test.releaseCapture){ test.releaseCapture(); } } //阻止默认行为 return false; //IE8-浏览器阻止默认行为 if(test.setCapture){ test.setCapture(); } } </script>

javascript动画之模拟拖拽效果篇

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjzsj.html