本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
