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

2019-11-19 18:12:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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;// 是否ievar $ = 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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

上一篇：jQuery实现遮罩层登录对话框

下一篇：使用DeviceOne实现微信小程序功能