作为一个马上要找工作、非计算机专业、热爱前端的大四狗，最近开始疯狂写demo、看书，准备九、十月份的校招。

晚上用js实现了一个比较简单（low）的拖拽效果，初步测试兼容性还是不错的，于是写一段小博文记录下~大神求轻喷

面向过程的写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #box {
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.             position: absolute;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="box"></div>
  17.     <script>
  18.         window.onload = function (){
  19.             var disX = 0;
  20.             var disY = 0;
  21.             var oBox = document.getElementById("box");
  22.             oBox.onmousedown = function (ev){
  23.                 var oEvent = ev || event;
  24.  
  25.                 oBox.style.cursor = "move";
  26.                 disX = oEvent.clientX - oBox.offsetLeft;
  27.                 disY = oEvent.clientY - oBox.offsetTop;
  28.  
  29.                 document.onmousemove = function (ev){
  30.                     var oEvent = ev || event;
  31.                     var theLeft = oEvent.clientX - disX;
  32.                     var theTop = oEvent.clientY - disY;
  33.  
  34.                     // 禁止用户从浏览器左框拖出
  35.                     if (theLeft < 0) {
  36.                         theLeft = 0;
  37.                     } else if (theLeft > document.documentElement.clientWidth-
  38.                         oBox.offsetWidth) {
  39.                         theLeft = document.documentElement.clientWidth-
  40.                         oBox.offsetWidth;
  41.                     } else if (theTop < 0) {
  42.                         theTop = 0;
  43.                     } else if (theTop > document.documentElement.clientHeight-
  44.                         oBox.offsetHeight) {
  45.                         theTop = document.documentElement.clientHeight-
  46.                         oBox.offsetHeight;
  47.                     }
  48.                     oBox.style.left = theLeft + 'px';
  49.                     oBox.style.top = theTop + 'px';
  50.                 }
  51.  
  52.             }
  53.  
  54.             document.onmouseup = function (){
  55.                 document.onmousemove =null;
  56.             }
  57.     　　　　 // 窗口重设大小时的处理方法
  58.             window.onresize = function (){
  59.                 oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';
  60.                 oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';
  61.             }
  62.             // 兼容firefox 3.6.19
  63.             return false;
  64.         }
  65.     </script>
  66. </body>
  67. </html>

 创建一个拖拽对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #box,#box2 {
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.             position: absolute;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="box"></div>
  17.     <div id="box2"></div>
  18.     <script>
  19.         window.onload = function (){
  20.             new Drag("box");
  21.             new Drag("box2");
  22.         }
  23.  
  24.         function Drag(id){
  25.             var _this = this;
  26.  
  27.             this.disX = 0;
  28.             this.disY = 0;
  29.             this.oBox = document.getElementById(id);
  30.  
  31.             this.oBox.onmousedown = function (ev){
  32.                 _this.fnDown(ev);
  33.  
  34.                 // 兼容firefox 3.6.19
  35.                 return false;
  36.             };
  37.  
  38.             document.onmouseup = function (){
  39.                 _this.fnUp();
  40.             }
  41.             window.onresize = function (){
  42.                 _this.fnResize();
  43.             };
  44.             // 兼容firefox 3.6.19
  45.             return false;
  46.         }
  47.  
  48.         Drag.prototype.fnDown = function(ev){
  49.  
  50.             var oEvent = ev || event;
  51.             var _this = this;
  52.             this.oBox.style.cursor = "move";
  53.             this.disX = oEvent.clientX - this.oBox.offsetLeft;
  54.             this.disY = oEvent.clientY - this.oBox.offsetTop;
  55.  
  56.             document.onmousemove = function (ev){
  57.                 _this.fnMove(ev);
  58.             };
  59.  
  60.         }
  61.  
  62.         Drag.prototype.fnMove = function(ev){
  63.             var oEvent = ev || event;
  64.             var theLeft = oEvent.clientX - this.disX;
  65.             var theTop = oEvent.clientY - this.disY;
  66.             // 禁止用户从浏览器左框拖出
  67.             if (theLeft < 0) {
  68.                 theLeft = 0;
  69.             } else if (theLeft > document.documentElement.clientWidth-
  70.                 this.oBox.offsetWidth) {
  71.                 theLeft = document.documentElement.clientWidth-
  72.                 this.oBox.offsetWidth;
  73.             }
  74.             if (theTop < 0) {
  75.                 theTop = 0;
  76.             } else if (theTop > document.documentElement.clientHeight-
  77.                 this.oBox.offsetHeight) {
  78.                 theTop = document.documentElement.clientHeight-
  79.                 this.oBox.offsetHeight;
  80.             }
  81.             this.oBox.style.left = theLeft + 'px';
  82.             this.oBox.style.top = theTop + 'px';
  83.         }
  84.  
  85.         Drag.prototype.fnUp = function (){
  86.             document.onmousemove =null;
  87.         }
  88.  
  89.         Drag.prototype.fnResize = function(){
  90.             this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';
  91.             this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';
  92.         }
  93.     </script>
  94. </body>
  95. </html>

[javascript]一种兼容性比较好的简单拖拽的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  4. javascript小实例，PC网页里的拖拽

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...

  5. javascript小实例，PC网页里的拖拽（转）

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  6. Unity UGUI 实现简单拖拽功能

    说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...

  7. javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)

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

  8. Javascript:简单拖拽效果的实现

    核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...

  9. 原生js通过prottype写的一个简单拖拽

    <!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...

随机推荐

  1. bzoj 1857: [Scoi2010]传送带 三分

    题目链接 1857: [Scoi2010]传送带 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 934  Solved: 501[Submit][Stat ...

  2. 高质量程序设计指南C/C++语言——C++/C常量（2）

  3. RFID电子标签的二次注塑封装

    生活当中,RFID电子标签具有明显的优势,随着RFID电子标签成本的降低.读写距离的提高.标签存储容量增大及处理时间缩短的发展趋势,R F I D电子标签的应用将会越来越广泛. RFID电子标签的应用 ...

  4. HDU 1498 50 years, 50 colors

    题目大意:给你一个 n*n 的矩阵,每个格子上对应着相应颜色的气球,每次你可以选择一行或一列的同种颜色的气球进行踩破,问你在K次这样的操作后,哪些颜色的气球是不可能被踩破完的. 题解:对于每一种颜色建 ...

  5. 【Leetcode】Triangle

    给定一个由数字组成的三角形,从顶至底找出路径最小和. Given a triangle, find the minimum path sum from top to bottom. Each step ...

  6. java代码发送JSON格式的httpPOST请求

    package com.test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOE ...

  7. [置顶] js操作iframe兼容各种浏览器

    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...

  8. 大一C语言结课设计之《简单计算器》

    /*===============================================*\ ** 设计目的:简单计算器,计算形如10*(20.2-30.6)+5.0/2的表达式值 ** 简 ...

  9. c#关于EXCEL导出数据库的做法

    using System;using System.Diagnostics;using System.Collections;using System.Data;using System.Web;us ...

  10. C#中静态方法的运用和字符串的常用方法（seventh day)

    又来到了今天的总结时间,由于昨天在云和学院学的知识没有弄懂,今天老师又专门给我们非常详细地讲了一遍,在这里非常谢谢老师.O(∩_∩)O 话不多说,下面就开始为大家总结一下静态方法的运用和字符串的常用方 ...