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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
Vue watch响应数据实现方法解析
Jul 10 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翻页跳转功能实现方法
2020/11/30 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Python进程间通信Queue实例解析
2018/01/25 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
500行python代码实现飞机大战
2020/04/24 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
演讲比赛获奖感言
2014/02/02 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
出国留学经济担保书
2014/04/01 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
优秀员工事迹材料
2014/12/20 职场文书
爱晚亭导游词
2015/02/09 职场文书
小学运动会报道稿
2015/07/22 职场文书
小学校园广播稿
2015/08/18 职场文书
学习党章心得体会2016
2016/01/15 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis