JavaScript 鼠標拖放效果代碼

2024-09-05 12:18:08

字體：大中小

來源：轉載

供稿：網友

JavaScript 鼠標拖放效果代碼，通過本示例了解觸發對象，設置范圍限制，指定容器大孝水平及垂直鎖定，還包括獲取和釋放焦點等。

<!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> 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 Bind = function(object, fun) {	return function() {		return fun.apply(object, arguments);	}} var BindAsEventListener = function(object, fun) {	return function(event) {		return fun.call(object, (event || window.event));	}} var CurrentStyle = function(element){	return element.currentStyle || document.defaultView.getComputedStyle(element, null);}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;    }}; //拖放程序var Drag = Class.create();Drag.prototype = {//拖放對象  initialize: function(drag, options) {	this.Drag = $(drag);//拖放對象	this._x = this._y = 0;//記錄鼠標相對拖放對象的位置	this._marginLeft = this._marginTop = 0;//記錄margin	//事件對象(用于綁定移除事件)	this._fM = BindAsEventListener(this, this.Move);	this._fS = Bind(this, this.Stop);	this.SetOptions(options);	this.Limit = !!this.options.Limit;	this.mxLeft = parseInt(this.options.mxLeft);	this.mxRight = parseInt(this.options.mxRight);	this.mxTop = parseInt(this.options.mxTop);	this.mxBottom = parseInt(this.options.mxBottom);		this.LockX = !!this.options.LockX;	this.LockY = !!this.options.LockY;	this.Lock = !!this.options.Lock;		this.onStart = this.options.onStart;	this.onMove = this.options.onMove;	this.onStop = this.options.onStop;		this._Handle = $(this.options.Handle) || this.Drag;	this._mxContainer = $(this.options.mxContainer) || null;		this.Drag.style.position = "absolute";	//透明	if(isIE && !!this.options.Transparent){		//填充拖放對象		with(this._Handle.appendChild(document.createElement("div")).style){			width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";		}	}	//修正范圍	this.Repair();	addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));  },  //設置默認屬性  SetOptions: function(options) {	this.options = {//默認值		Handle:			"",//設置觸發對象（不設置則使用拖放對象）		Limit:			false,//是否設置范圍限制(為true時下面參數有用,可以是負數)		mxLeft:			0,//左邊限制		mxRight:		9999,//右邊限制		mxTop:			0,//上邊限制		mxBottom:		9999,//下邊限制		mxContainer:	"",//指定限制在容器內		LockX:			false,//是否鎖定水平方向拖放		LockY:			false,//是否鎖定垂直方向拖放		Lock:			false,//是否鎖定		Transparent:	false,//是否透明		onStart:		function(){},//開始移動時執行		onMove:			function(){},//移動時執行		onStop:			function(){}//結束移動時執行	};	Extend(this.options, options || {});  },  //準備拖動  Start: function(oEvent) {	if(this.Lock){ return; }	this.Repair();	//記錄鼠標相對拖放對象的位置	this._x = oEvent.clientX - this.Drag.offsetLeft;	this._y = oEvent.clientY - this.Drag.offsetTop;	//記錄margin	this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;	this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;	//mousemove時移動 mouseup時停止	addEventHandler(document, "mousemove", this._fM);	addEventHandler(document, "mouseup", this._fS);	if(isIE){		//焦點丟失		addEventHandler(this._Handle, "losecapture", this._fS);		//設置鼠標捕獲		this._Handle.setCapture();	}else{		//焦點丟失		addEventHandler(window, "blur", this._fS);		//阻止默認動作		oEvent.preventDefault();	};	//附加程序	this.onStart();  },  //修正范圍  Repair: function() {	if(this.Limit){		//修正錯誤范圍參數		this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);		this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);		//如果有容器必須設置position為relative來相對定位，并在獲取offset之前設置		!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");	}  },  //拖動  Move: function(oEvent) {	//判斷是否鎖定	if(this.Lock){ this.Stop(); return; };	//清除選擇	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();	//設置移動參數	var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;	//設置范圍限制	if(this.Limit){		//設置范圍參數		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;		//如果設置了容器，再修正范圍參數		if(!!this._mxContainer){			mxLeft = Math.max(mxLeft, 0);			mxTop = Math.max(mxTop, 0);			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);		};		//修正移動參數		iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);		iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);	}	//設置位置，并修正margin	if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }	if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }	//附加程序	this.onMove();  },  //停止拖動  Stop: function() {	//移除事件	removeEventHandler(document, "mousemove", this._fM);	removeEventHandler(document, "mouseup", this._fS);	if(isIE){		removeEventHandler(this._Handle, "losecapture", this._fS);		this._Handle.releaseCapture();	}else{		removeEventHandler(window, "blur", this._fS);	};	//附加程序	this.onStop();  }};</script> <style> #idContainer{ border:10px solid #990000; width:600px; height:300px;}#idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; top:50px; left:50px;}#idHandle{cursor:move; height:25px; background:#0000FF; overflow:hidden;}</style> <div   class="w2uk64w"   id="idContainer"><div   class="isce644"   id="idDrag"><div   class="s444og4"   id="idHandle"></div></div></div><input id="idReset" type="button" value="復位" /><input id="idLock" type="button" value="鎖定" /><input id="idLockX" type="button" value="鎖定水平" /><input id="idLockY" type="button" value="鎖定垂直" /><input id="idLimit" type="button" value="范圍鎖定" /><input id="idLimitOff" type="button" value="取消范圍鎖定" /><br />拖放狀態：<span id="idShow">未開始</span> <script> var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,	onStart: function(){ $("idShow").innerHTML = "開始拖放"; },	onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },	onStop: function(){ $("idShow").innerHTML = "結束拖放"; }}); $("idReset").onclick = function(){	drag.Limit = true;	drag.mxLeft = drag.mxTop = 0;	drag.mxRight = drag.mxBottom = 9999;	drag.LockX = drag.LockY = drag.Lock = false;}$("idLock").onclick = function(){ drag.Lock = true; }$("idLockX").onclick = function(){ drag.LockX = true; }$("idLockY").onclick = function(){ drag.LockY = true; }$("idLimit").onclick = function(){	 drag.mxRight = drag.mxBottom = 200;drag.Limit = true; }$("idLimitOff").onclick = function(){ drag.Limit = false; }</script></body></html>

上一篇：JavaScript網頁倒計時跳轉

下一篇：簡化版的網頁拖放效果-Drag-and-drop