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中void(0)的具体含义解释
Feb 27 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
Javascript 数组排序详解
Oct 22 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Openlayers实现图形绘制
Sep 28 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
移动端js图片查看器
2016/11/17 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
Python中运行并行任务技巧
2015/02/26 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
销售经理工作职责范文
2013/12/03 职场文书
20岁生日感言
2014/01/13 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
网络研修随笔感言
2014/02/17 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
2015年化验员工作总结
2015/04/10 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
python数字转对应中文的方法总结
2021/08/02 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫