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. Vue木桶布局插件

        公司最近在重构,使用的是Vue框架.涉及到一个品牌的布局,因为品牌的字符长度不一致,所以导致每一个的品牌标签长短不一.多行布局下就会导致每行的品牌布局参差不齐,严重影响美观.于是就有了本篇的木 ...

  2. OC8051项目启动

  3. MySQL如何复制一个表

    MySQL如何复制一个表 1 复制 employee 表 => employee2 () create table employee2 like employee () insert into ...

  4. Running OOM killer script for process 32248 for Solr on port 8983

    Running OOM killer script for process 32248 for Solr on port 8983 分析1 https://blog.csdn.net/qq_41665 ...

  5. Numpy+Pandas读取数据

    1.为什么使用Numpy+Pandas 在使用Numpy读取csv文件时,文件中含有字符串时,会出现ValueError错误 2.Pandas读取csv文件:

  6. 新线程 handler

    class CalculateThread extends Thread { private Handler handler; @Override public void run() { super. ...

  7. An entity cannot be annotated with both @Entity and @MappedSuperclass: com.example1.demo1.Entity.User错误

    项目问SpringDataJpa项目,在运行的过程中出现的以下错误: Caused by: org.hibernate.AnnotationException: An entity cannot be ...

  8. luogu1736 创意吃鱼法

    好的题解使人一下就懂啊-- s1[i][j]表示(i,j)最多向左(或右)延伸多少个格子,使这些格子中的数都是0(不包括(i,j)) s2[i][j]表示(i,j)最多向上延伸多少个格子,使这些格子中 ...

  9. iOS学习笔记36-Masonry自动布局

    一.Masonry介绍 之前我们在屏幕适配的章节中学习过AutoLayout的使用,但那都是在可视化界面上进行添加约束完成的,我们很多时候都需要在代码中使用AutoLayout约束,苹果也为我们提供了 ...

  10. 【bzoj4292】[PA2015]Równanie 暴力

    题目描述 对于一个正整数n,定义f(n)为它十进制下每一位数字的平方的和.现在给定三个正整数k,a,b,请求出满足a<=n<=b且k*f(n)=n的n的个数. 输入 第一行包含三个正整数k ...