编程 Javascript

JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

Posted in Javascript onJune 21, 2016

本文实例讲述了JS实现兼容各种浏览器的高级拖动方法。分享给大家供大家参考，具体如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>高级拖动</title>
 <style>
  #toBeDraged{
  width:100px;
  height:100px;
  line-height:100px;
  border:1px solid red;
  position:absolute;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  cursor:move;
  }
 </style>
 <script type= "text/javascript">
  window.onload = function(){
  doDrag();
  }
  function doDrag(){
  var div = document.getElementById("toBeDraged");
  var posx;
  var posy;
  div.onmousedown = function(e){
   var e = e || window.event;
   if (div.setCapture) {
   div.setCapture();
   }
   posx = e.clientX - parseInt(div.offsetLeft);
   posy = e.clientY - parseInt(div.offsetTop);
   document.onmousemove = function(ev){
   var ev = ev || window.event;//如果是IE
   if (ev.setcapture) {
   }
   div.style.left = (ev.clientX - posx)+"px";
   div.style.top = (ev.clientY - posy)+"px";
   }
   document.onmouseup = function(){
   document.onmousemove = null;
   document.onmouseup = null;
   if (div.releaseCapture) {
    div.releaseCapture();
   }
   }
  }
  }
 </script>
 </head>
 <body>
 <div id = "toBeDraged">你拖我啊!</div>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

- Author -

cherry

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Package.js 现代化的JavaScript项目make工具

May 23 Javascript

通过上下左右键和回车键切换光标实现代码

Mar 08 Javascript

让图片旋转任意角度及JQuery插件使用介绍

Mar 20 Javascript

异步动态加载js与css文件的js代码

Sep 15 Javascript

javascript创建和存储cookie示例

Jan 07 Javascript

JS在可编辑的div中的光标位置插入内容的方法

Nov 20 Javascript

JS简单实现动画弹出层效果

May 05 Javascript

javascript验证内容为数字以及长度为10的简单实例

Aug 20 Javascript

基于vue实现swipe轮播组件实例代码

May 24 Javascript

使用JavaScript实现链表的数据结构的代码

Aug 02 Javascript

vue.js 父向子组件传参的实例代码

Oct 29 Javascript

vue引入ueditor及node后台配置详解

Jan 03 Javascript

JavaScript检测原始值、引用值、属性

Jun 20 #Javascript

Js 获取当前函数参数对象的实现代码

Jun 20 #Javascript

JS实现鼠标框选效果完整实例

Jun 20 #Javascript

javascript事件冒泡简单示例

Jun 20 #Javascript

JS实现的打字机效果完整实例

Jun 20 #Javascript

jQuery实现的网格线绘制方法

Jun 20 #Javascript

jQuery实现右下角可缩放大小的层完整实例

Jun 20 #Javascript