1、最基础的写法

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width:200px; height:200px; background:yellow; position:absolute;}

 </style>

 <script>

 window.onload=function ()

 {

     var oDiv=document.getElementById('div1');

     oDiv.onmousedown=function (ev)

     {

         var oEvent=ev||event;

         var disX=oEvent.clientX-oDiv.offsetLeft;

         var disY=oEvent.clientY-oDiv.offsetTop;

         document.onmousemove=function (ev)

         {

             var oEvent=ev||event;

             oDiv.style.left=oEvent.clientX-disX+'px';

             oDiv.style.top=oEvent.clientY-disY+'px';

         };

         document.onmouseup=function ()

         {

             document.onmousemove=null;

             document.onmouseup=null;

         };

     };

 };

 </script>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>

2、相比较高级的写法

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width:200px; height:200px; background:yellow; position:absolute;}

 </style>

 <script>

 var oDiv=null;

 var disX=0;

 var disY=0;

 window.onload=function ()

 {

     oDiv=document.getElementById('div1');

     oDiv.onmousedown=fnDown;

 };

 function fnDown(ev)

 {

     var oEvent=ev||event;

     disX=oEvent.clientX-oDiv.offsetLeft;

     disY=oEvent.clientY-oDiv.offsetTop;

     document.onmousemove=fnMove;

     document.onmouseup=fnUp;

 }

 function fnMove(ev)

 {

     var oEvent=ev||event;

     oDiv.style.left=oEvent.clientX-disX+'px';

     oDiv.style.top=oEvent.clientY-disY+'px';

 }

 function fnUp()

 {

     document.onmousemove=null;

     document.onmouseup=null;

 }

 </script>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>

3、

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:200px; height:200px; background:yellow; position:absolute;}

#div2 {width:200px; height:200px; background:green; position:absolute;}

</style>

<script src="Drag.js"></script>

<script src="LimitDrag.js"></script>

<script>

window.onload=function ()

{

    new Drag('div1');

    new LimitDrag('div2');

};

</script>

</head>

<body>

<div id="div1">普通拖拽</div>

<div id="div2">限制范围</div>

</body>

</html>

Dray.js

 function Drag(id)

 {

     var _this=this;

     this.disX=0;

     this.disY=0;

     this.oDiv=document.getElementById(id);

     this.oDiv.onmousedown=function (ev)

     {

         _this.fnDown(ev);

         return false;

     };

 };

 Drag.prototype.fnDown=function (ev)

 {

     var _this=this;

     var oEvent=ev||event;

     this.disX=oEvent.clientX-this.oDiv.offsetLeft;

     this.disY=oEvent.clientY-this.oDiv.offsetTop;

     document.onmousemove=function (ev)

     {

         _this.fnMove(ev);

     };

     document.onmouseup=function ()

     {

         _this.fnUp();

     };

 };

 Drag.prototype.fnMove=function (ev)

 {

     var oEvent=ev||event;

     this.oDiv.style.left=oEvent.clientX-this.disX+'px';

     this.oDiv.style.top=oEvent.clientY-this.disY+'px';

 };

 Drag.prototype.fnUp=function ()

 {

     document.onmousemove=null;

     document.onmouseup=null;

 };

LimitDrag.js

 function LimitDrag(id)

 {

     Drag.call(this, id);    //继承属性

 }

 for(var i in Drag.prototype)

 {

     LimitDrag.prototype[i]=Drag.prototype[i];

 }

 LimitDrag.prototype.fnMove=function (ev)

 {

     var oEvent=ev||event;

     var l=oEvent.clientX-this.disX;

     var t=oEvent.clientY-this.disY;

     if(l<)

     {

         l=0;

     }

     else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)

     {

         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;

     }

     this.oDiv.style.left=l+'px';

     this.oDiv.style.top=t+'px';

 };

js拖拽效果的实现的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. js拖拽效果

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

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  5. js拖拽效果实现

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

  6. js拖拽效果详细讲解

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

  7. js div浮动层拖拽效果代码

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

  8. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. LeetCode945-使数组唯一的最小增量

    问题:使数组唯一的最小增量 给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1. 返回使 A 中的每个值都是唯一的最少操作次数. 示例 1: 输入:[1,2,2] 输出:1 ...

  2. vue-cli3.0相关的坑

    vue-cli3.0相对比vue-cli2.0少了 vue-build.js vue-config.js vue-cli2.0 运行命令 npm run devvue-cli3.0 运行命令 npm ...

  3. 设置vim 永久显示行号

    永久显示行号:如果想让vim永久显示行号,则需要修改vim配置文件vimrc.如果没有此文件可以创建一个.在启动vim时,当前用户根目录下的vimrc文件会被自动读取,因此一般在当前用户的根目录下创建 ...

  4. 1.python中的变量

    什么是变量 1.在任何语言中都有变量的概念,在python中变量是用一个变量名表示,变量名必须是用大小写英文字母,数字,下滑写(_)组成.不能用数字开头.(但用中文做变量名也可以,不要这样做) 例: ...

  5. OpenCV中的图像形态学转换

    两个基本的形态学操作是腐蚀和膨胀.他们的变化构成了开运算,闭运算,梯度等.下面以这张图为例 1.腐蚀 这个操作会把前景物体的边界腐蚀掉. import cv2 import numpy as np i ...

  6. 【HIHOCODER 1403】后缀数组一·重复旋律（后缀数组）

    描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列. 小Hi在练习过很多曲子以后发现很多作品自身包含一样的旋律.旋律是一段连续的数列,相似的旋律在原数列 ...

  7. 利用Windbg深入理解变量的存储模型

    下面的是一个简单的测试程序,基本包括了所有的变量类型,包括静态的,常量的,全局的,本地的,还有new出来的 #include <iostream> using namespace std; ...

  8. 2049: [Sdoi2008]Cave 洞穴勘测（LCT）

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 9962  Solved: 4824[Submit] ...

  9. css 透明度使用

    设置元素整体透明度: div{ opacity: 0.5; } 设置背景色透明度 div{ background: rgba(0,0,0,0.5); }

  10. Xampp 配置出现403无法访问

    找到\xampp\apache\conf\httpd.conf配置文件 Access forbidden! You don’t have permission to access the reques ...