JS实现的简易拖放效果示例


Posted in Javascript onDecember 29, 2016

本文实例讲述了JS实现的简易拖放效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易拖放效果</title>
</head>
<body>
<script type="text/JavaScript">
<!--
var isIE = (document.all) ? true : false;// 是否ie
var $ = function (id) {
  //返回id对象
  return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
  // 带构造方法的类
  create: function() {
    return function() { this.initialize.apply(this, arguments); } //用apply应用下面的initialize初始化属性
  }
}
var Extend = function(destination, source) {
  //继承
  for (var property in source) {
    destination[property] = source[property];
  }
}
var Bind = function(object, fun) {
  return function() {
    return fun.apply(object, arguments);
  }
}
/**
用object对象调用fun参数是event||window event
**/
var BindAsEventListener = function(object, fun) {
  return function(event) {
    return fun.call(object, (event || window.event));
  }
}
/**
添加帧听器事件
@oTarget 目标对象
@sEventType 事件类型
@fnHandler 目标触发事件对象
**/
function addEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);//firefox
  } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);//ie
  } else {
    oTarget["on" + sEventType] = fnHandler;//other
  }
};
/**
清除添加的帧听器事件
@oTarget 目标对象
@sEventType 事件类型
@fnHandler 目标触发事件对象
**/
function removeEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.removeEventListener) {
    oTarget.removeEventListener(sEventType, fnHandler, false);
  } else if (oTarget.detachEvent) {
    oTarget.detachEvent("on" + sEventType, fnHandler);
  } else {
    oTarget["on" + sEventType] = null;
  }
};
/*------------------------------相关模型构造完毕-----------------------------------*/
//拖放程序
var SimpleDrag = Class.create();
SimpleDrag.prototype = {
 //拖放对象,触发对象,初始化
 initialize: function(drag) {
  this.Drag = $(drag);
  this._x = this._y = 0;
  this._fM = BindAsEventListener(this, this.Move);//_fM方法就是应用MOVE方法参数是event||window.event
  this._fS = Bind(this, this.Stop);//_fS类方法就是Stop方法
  this.Drag.style.position = "absolute";
  this.Drag.style.cursor = "move";
  addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
 },
 //准备拖动
 Start: function(oEvent) {
  this._x = oEvent.clientX - this.Drag.offsetLeft;
  this._y = oEvent.clientY - this.Drag.offsetTop;
  addEventHandler(document, "mousemove", this._fM);
  addEventHandler(document, "mouseup", this._fS);
 },
 //拖动
 Move: function(oEvent) {
  this.Drag.style.left = oEvent.clientX - this._x + "px";
  this.Drag.style.top = oEvent.clientY - this._y + "px";
 },
 //停止拖动
 Stop: function() {
  removeEventHandler(document, "mousemove", this._fM);
  removeEventHandler(document, "mouseup", this._fS);
 }
};
// -->
</script>
<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div>
<script type="text/javascript">
<!--
new SimpleDrag("idDrag");
// -->
</script>
</body>
</html>

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 #Javascript
浅谈js算法和流程控制
Dec 29 #Javascript
canvas学习之API整理笔记(二)
Dec 29 #Javascript
Node.js复制文件的方法示例
Dec 29 #Javascript
详解微信小程序——自定义圆形进度条
Dec 29 #Javascript
JS作用域深度解析
Dec 29 #Javascript
You might like
zend framework多模块多布局配置
2011/02/26 PHP
PHP里的单例类写法实例
2015/06/25 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
用python写asp详细讲解
2013/12/16 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python的else子句使用指南
2016/02/27 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python flask安装和命令详解
2019/04/02 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
办理信用卡工作证明
2014/01/11 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
派出所所长先进事迹
2014/05/19 职场文书
青年标兵事迹材料
2014/08/16 职场文书
我的中国心演讲稿
2014/09/04 职场文书
运动会通讯稿50字
2015/07/20 职场文书