JavaScript 拖放效果_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:53:581044瀏覽
拖放效果，也叫拖拽、拖动。一个简单的拖放效果
拖动div
【程序说明】
首先初始化函数，对拖放对象添加mousedown监听事件
initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 } 之后在Start方法添加mousemove和mouseup事件，分别监听拖放对象的位置和取消监听事件
Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.addEventHandler(document, "mouseup", this._fS); } 完整拖放程序：
/** *拖放程序 */ var simpleDrag = Class.create(); simpleDrag.prototype = { //初始化对象 initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 }, //准备拖动 Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.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(){ EventUtil.removeEventHandler(document, "mousemove", this._fM); EventUtil.removeEventHandler(document, "mouseup", this._fS); }, }; //初始化拖动 new simpleDrag('drag'); 完整DEMO：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript拖放效果</title> <style type="text/css"> *{margin:0;padding:0;} .drag-wrap{height: 300px;margin:10px;border:5px solid #FF8000;background:#8080C0;position: relative;} .draggable{width: 100px;height: 100px;position: absolute;top: 100px;left:100px;background:#eee;border:1px solid #aceaac;cursor: move;} </style></head><body> <div class="drag-wrap"> <div class="draggable" id="drag">拖动div</div> </div> <div class="drag-status" id="drag-status" style="height:30px;padding:0 10px;"></div> <script type="text/javascript"> /** *工具函数 */ var isIE = (document.all) ? true : false ; var $$ = function(id){ return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }; var Extend = function(destination,source){ for(var property in source){ destination[property] = source[property]; } }; var BindAsEventListener = function(object,func){ return function(event){ return func.call(object,event || window.event); } }; var Bind = function(object,func){ return function(){ return func.apply(object,arguments); } }; /** *跨浏览器事件对象 */ var EventUtil = { //事件注册处理程序 addEventHandler:function(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; } }, //事件移除处理程序 removeEventHandler:function(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; } }, getEvent:function(event){ return event ? event : window.event ; }, getTarget:function(event){ return event.target || event.srcElement; } }; /** *拖放程序 */ var simpleDrag = Class.create(); simpleDrag.prototype = { //初始化对象 initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 }, //准备拖动 Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.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(){ EventUtil.removeEventHandler(document, "mousemove", this._fM); EventUtil.removeEventHandler(document, "mouseup", this._fS); }, }; //初始化拖动 new simpleDrag('drag'); </script></body></html>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn