JS基于面向对象实现的拖拽功能示例


Posted in Javascript onDecember 20, 2016

本文实例讲述了JS基于面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:

<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];
}

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

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
js function使用心得
May 10 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
js定时器实例分享
Dec 20 #Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 #Javascript
You might like
在PHP中使用XML
2006/10/09 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
python实现定时提取实时日志程序
2018/06/22 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python字符串查找函数的用法详解
2019/07/08 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python Django搭建网站流程图解
2020/06/13 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python调用win32接口进行截图的示例
2020/11/11 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
什么是Web Service?
2012/07/25 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
导游词之岳阳楼
2019/09/25 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript