js实现的拖动后记录轨迹并运行

更新时间：2010年06月04日 19:11:47 作者：

轨迹拖动（拖影效果）

效果如图所示:

演示代码:

<!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> <style type="text/css"> * {margin:0px;padding:0px;} #div1 {position:relative;left:200px;top:200px;width:100px; height:100px; background-color:#f60;cursor:move;} </style> <script type="text/javascript"> var isIE = (document.all)?true:false; var $ID = function(id){ return "string"==typeof id?document.getElementById(id):id; } var Class = { create:function(){ return function(){ this.initilize.apply(this,arguments); } } } var Extend = function(destination, source){ for(var property in source){ destination[property] = source[property]; } } var Bind = function(object,fun){ var args = Array.prototype.slice.call(arguments).slice(2); return function(){ return fun.apply(object,args); } } var BindAsEventListener = function(object,fun){ var args = Array.prototype.slice.call(arguments).slice(2); return function(event){ return fun.apply(object,[event||window.event].concat(args)); } } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + 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; } }; function getNodePosition(node,type){//type="left"or"top" var nodeTemp = node; var l = 0; var t = 0; while(nodeTemp!=document.body&&nodeTemp!=null){ l += nodeTemp.offsetLeft; t += nodeTemp.offsetTop; nodeTemp = nodeTemp.offsetParent; } if(type.toLowerCase()=="left") return l; else return t; } //前面通常都用一个base.js封装 </script> <script type="text/javascript"> var MyDrag = Class.create(); MyDrag.prototype = { initilize:function(obj){ this.Obj = $ID(obj); this._x = this._y = 0; this._xx = this._yy = 0;//Move记录坐标 this.Obj.style.position = "absolute"; this._pos = []; this._ifSavePos = true; this._t = null; this._speed = 10; this._indexMove = 0;//全局的MoveIndex this._fnStart = BindAsEventListener(this,this.Start); this._fnMove = BindAsEventListener(this,this.Move); this._fnStop = Bind(this,this.Stop); addEventHandler(this.Obj,"mousedown",this._fnStart); }, Start:function(oEvent){ if(!this._ifSavePos) this._pos = []; this.Drag = this.Obj.cloneNode(true); if(isIE) this.Drag.style.filter = "alpha(opacity=50)"; else this.Drag.style.opacity = "0.5"; this.Obj.parentNode.appendChild(this.Drag); this._left1 = this._xx = getNodePosition(this.Obj,"left"); this._top1 = this._yy = getNodePosition(this.Obj,"top"); this._x = oEvent.clientX - this.Obj.offsetLeft; this._y = oEvent.clientY - this.Obj.offsetTop; addEventHandler(document,"mousemove",this._fnMove); addEventHandler(document,"mouseup",this._fnStop); this._t = setInterval(Bind(this,this.SavePos),10); }, SavePos:function(){//记录坐标点 this._pos.push(this._xx + "_" + this._yy); }, Move:function(oEvent){ if(isIE) oEvent.returnValue = false; this._xx = oEvent.clientX - this._x; this._yy = oEvent.clientY - this._y; this.Drag.style.left = this._xx + "px"; this.Drag.style.top = this._yy + "px"; }, Stop:function(){ removeEventHandler(document,"mousemove",this._fnMove); removeEventHandler(document,"mouseup",this._fnStop); this.Obj.parentNode.removeChild(this.Drag); this.Obj.style.left = this._xx + "px"; this.Obj.style.top = this._yy + "px"; clearInterval(this._t); this._fnCloneMove = Bind(this,this.CloneMove); this._t = setTimeout(this._fnCloneMove,50); }, CloneMove:function(){ if(this._indexMove<6){ new ObjMove({x1:this._left1,y1:this._top1,x2:this._xx,y2:this._yy,pos:this._pos}); this._indexMove++; this._t = setTimeout(this._fnCloneMove,50); }else{ clearTimeout(this._t); this._indexMove = 0; } } } var ObjMove = Class.create(); ObjMove.prototype = { initilize:function(options){ this.SetOptions(options); this.Obj = document.createElement("DIV"); this.Obj.style.cssText = "position:absolute;left:"+ this.options.x1 +"px;top:"+ this.options.y1 +"px;width:100px;height:100px;background-color:#f60;fliter:alpha(opacity=100);opacity:1;"; document.body.appendChild(this.Obj); this.Move2(); }, SetOptions: function(options) { this.options = {//默认值 x1: 0, y1: 0, x2: 0, y2: 0, pos: [] }; Extend(this.options, options || {}); }, Move2:function(){ this._indexMove = 0; this._fnMovePos = Bind(this,this.MovePos); this._t = setInterval(this._fnMovePos,10); }, MovePos:function(){ if(this._indexMove>=this.options.pos.length){ this.options.pos = []; document.body.removeChild(this.Obj); clearInterval(this._t); }else{ this.Obj.style.left = this.options.pos[this._indexMove].split("_")[0] + "px"; this.Obj.style.top = this.options.pos[this._indexMove].split("_")[1] + "px"; } this._indexMove++; } } onload = function(){ var myDrag = new MyDrag("div1"); $ID("rad1").onclick = function(){ myDrag._ifSavePos = true; } $ID("rad2").onclick = function(){ myDrag._ifSavePos = false; } } </script> </head> <body> <div>随意拖动那个小方块几秒钟</div> <label for="rad1"><input type="radio" id="rad1" name="rad" checked="checked"/>记住轨迹</label> <label for="rad2"><input type="radio" id="rad2" name="rad"/>不记住轨迹</label> <div id="div1"> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

ES6基础之 Promise 对象用法实例详解
这篇文章主要介绍了ES6基础之 Promise 对象用法,结合实例形式详细分析了ES6中 Promise 对象功能、用法及相关操作注意事项,需要的朋友可以参考下
2019-08-08
在TypeScript中迭代对象键Object.keys不起作用的原因和解决方案
在TypeScript中迭代对象键object keys可能是一场噩梦,以下是我所知道的所有解决方案,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-10-10
深入理解Antd-Select组件的用法
这篇文章主要介绍了深入理解Antd-Select组件的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
XmlUtils JS操作XML工具类
经常用到对xml的操作，Java里面有dom和dom4j等工具类，但是Javascript就没有，所以自己写了一个，目前算作第一个版本吧。肯定还有很多地方需要改进，如果有需要用的朋友，可以把bug和需要完善改进的地方留言或评论。
2009-10-10
BootStrap的select2既可以查询又可以输入的实现代码
这篇文章主要介绍了bootstrap的select2既可以查询又可以输入的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
js实现网页随机验证码
这篇文章主要为大家详细介绍了js实现网页随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
javascript正则表达式中分组详解
这篇文章主要介绍了javascript正则表达式中分组的相关资料,包括捕获性分组和非捕获性分组,需要的朋友可以参考下
2016-07-07
Openlayers学习之加载鹰眼控件
这篇文章主要介绍了Openlayers学习之加载鹰眼控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
jQuery实现动态添加、删除按钮及input输入框的方法
这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
2017-04-04
JavaScript callback回调函数用法实例分析
这篇文章主要介绍了JavaScript callback回调函数用法,结合实例形式分析了callback回调函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下
2018-05-05

js实现的拖动后记录轨迹并运行

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具