JavaScript 鼠标拖放效果代码

2020-01-27 13:44:09

字体：大中小

来源：转载

供稿：网友

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 id="idContainer"><div id="idDrag"><div 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>

上一篇：简化版的网页拖放效果-Drag-and-drop

下一篇：JavaScript网页倒计时跳转