<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
    new Drag("div1");
    new Drag("div2");
}
function Drag(id)
{
    var _this=this;
    this.oDiv=document.getElementById(id);    
    this.disX=0;
    this.disY=0;
    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;
        var l=oEvent.clientX-this.disX;
        var t=oEvent.clientY-this.disY;
        
        if(l<0)
        {
            l=0;
        }
        else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
        {
            l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
        }
        
        if(t<0)
        {
            t=0;
        }
        else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
        {
            t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
        }
        
        this.oDiv.style.left=l+'px';
        this.oDiv.style.top=t+'px';
    };

Drag.prototype.fnUp=function()
    {
        document.onmousemove=null;
        document.onmouseup=null;
    };

</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

继承

function LimitDrag(id){

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

}

for(var i in Drag.prototype){

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

}

[Js]面向对象的拖拽的更多相关文章

  1. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  4. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  5. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  6. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  7. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  8. angular-dragon-drop.js 双向数据绑定拖拽的功能

    在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...

  9. js制作可拖拽可点击的悬浮球

    兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...

随机推荐

  1. c++ 临时变量

    C++的临时变量 它们是被神所遗弃的孩子,没有人见过它们,更没有人知道它们的名字.它们命中注定徘徊于命运边缘高耸的悬崖和幽深的深渊之间,用自己短暂的生命抚平了生与死之间的缝隙.譬如朝露,却与阳光无缘. ...

  2. js 返回上一页

    --------2016-6-14 16:37:30-- source:[1]js返回上一页

  3. Mysql 系统参数 系统变量 状态变量

    1.系统参数,也就是命令行选项,执行命令的时候,后面跟的参数,系统参数很多,不可能每次执行程序的时候,指定这些参数.这些参数写在配置文件(Windows下是my.ini,Linux是my.cnf),执 ...

  4. 转：对TCP/IP网络协议的深入浅出归纳

    转自:http://blog.jobbole.com/74795/ 前段时间做了一个开发,涉及到网络编程,开发过程比较顺利,但任务完成后始终觉得有一些疑惑.主要是因为对网络协议不太熟悉,对一些概念也没 ...

  5. spring 配置触发器

    原转发的博文 http://blog.csdn.net/liaq325/article/details/8269439 在Spring中配置Quartz 前面介绍过了Timer在Spring中的实现, ...

  6. CSocket必须使用stream socket不能够使用数据报 socket

    如果使用MFC socket类CSoket通讯,必须使用stream socket,不能够使用 SOCK_DGRAM 类型socket.原因如下: 1 stream socket和数据报socket的 ...

  7. Git 分支管理是一门艺术

    转载: Git 分支管理是一门艺术 1 要确保:团队成员从主分支(master)获得的都是处于可发布状态的代码,而从开发分支(develop)应该总能够获得最新开发进展的代码. 2 "辅助分 ...

  8. ubuntu 64位android项目报错的解决方案,打开64位 Ubuntu 的32位支持功能

    ubuntu的64位下的android环境,说实话,还真得费点精力了,解决一个问题,又出来一个新问题. 小编昨天刚好不容易将android的环境搭建好了,这不,刚建了个项目,直接就报错,下面是罗列出的 ...

  9. 发布完ArcGIS地图服务后，服务未启动成功

    今天下午更新地图服务后,服务未启动成功.出来的弹出框警告问题目前应该是ArcGIS Server出了问题,打开ArcCatalog目录,查看GIS服务器下localhost下的服务,只要是今天发布的服 ...

  10. Python--关于set

    慕课网<Pyrhon入门>学习笔记 1.set 特性 set 持有一系列元素,这一点和 list 很像,但是set的元素没有重复,而且是无序的,这点和 dict 的 key很像. 可以将s ...