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

效果如图所示:

演示代码:

拖动_轨迹运行

* {margin:0px;padding:0px;}
#div1 {position:relative;left:200px;top:200px;width:100px; height:100px; background-color:#f60;cursor:move;}

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封装

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=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;
}
}

随意拖动那个小方块几秒钟

记住轨迹
不记住轨迹

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

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

    效果如图所示:演示代码: 拖动_轨迹运行 * {margin:0px;padding:0px;} #div1 {position:relative;left:200px;top:200px;width:100px; height:100px; background-color:#f60;cursor:move;} var isIE = (document.all)?true:false; var $ID = function(id){ return "string"==typeof i

  • three.js绘制地球、飞机与轨迹的效果示例

    对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

  • 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

  • Vue中使用elementui与Sortable.js实现列表拖动排序

    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script>     import Sortable from 'sortablejs'     export default{         .........         data() {             retur

  • JS实现简单拖动模态框案例

    本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面的"点击,弹出登录框"设置点击事件,点击之后就显示遮罩层和模态框,然后给模态框上面的关闭按钮设置点击事件,点击之后就隐藏遮罩层和模态框.然后是拖拽过程,这个过程的实现较为复杂,主要分为下面几步: 1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标.

  • JS点击链接后慢慢展开隐藏着图片的方法

    本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i

  • 原生态js,鼠标按下后,经过了那些单元格的简单实例

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑定在整个table上,还出现了undefined 鼠标的反复进入进出,会导致相同元素的断断续续的重复, 如何解决他们! <table border="1" id="dnf"> <tr> <td rowspan="2"&g

  • 基于JS组件实现拖动滑块验证功能(代码分享)

    拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m

  • js操作cookie保存浏览记录的方法

    本文实例讲述了js操作cookie保存浏览记录的方法.分享给大家供大家参考,具体如下: 说明:最近做了一个功能,记录用户浏览过的产品页面.我的思路是,客户每次进入产品页面,就自己调用JS把产品信息以json的形式保存到cookie里面. 浏览记录的显示是从cookie里读出来,然后解析成json,生成html元素.因为用户可能会同时打开好几个页面,这几个页面上可能都有浏览记录,为了使即使显示浏览记录,每秒中刷新一次. 要用到2个js文件,history.js,关键的聊天记录保存和读取代码.jso

  • JS实现左右拖动改变内容显示区域大小的方法

    本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法.分享给大家供大家参考.具体如下: 这里演示左右可拖动的内容显示区效果,左右拖动红条改变显示区域宽度大小,往左拖则全部显示右侧内容,往右拖则全部显示左则内容,类似QQ的聊天窗口一样,可以向上或向下拖动大小,以适合使用者的要求.本代码完全JavaScript与CSS代码结合实现,在各主流浏览器内运行的兼容性也不错,左右拖动改变大小的JS代码推荐给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

随机推荐