自己写的一个js注册拖动对象的函数

下面是自己写的一个js注册拖动对象的函数,不是很完善,因为接触了jquery.draggable插件后,觉得再发明轮子有点多余,所以将自己写的在项目中删了,放在这做个留念。

/**
		 * 注册DOM对象的拖动事件
		 * @param param {
		 * @param	target: 被注册的DOM对象,
		 * @param	interval: 响应mouseMoveCallback回调的最小时间间隔。默认为200ms
		 * @param	mouseDownCallback: 鼠标按下事件的回调函数。
		 * @param	mouseMoveCallback: 拖动过程中鼠标移动事件的回调函数(本函数结合时间间隔interval使用,每隔interval时间长度才响应一次),
		 * @param	mouseUpCallback: 拖动完成的回调函数。
		 * @param	canXMove: X轴方向是否可以移动。true-可以移动;false-不可以移动。默认值true
		 * @param	canYMove: Y轴方向是否可以移动。true-可以移动;false-不可以移动。默认值true
		 * @param	xRange: Array,X轴方向的范围。xRange[0]-X轴的最小值;xRange[1]-X轴的最大值。如果xRange[0]或xRange[1]未定义,则不限制
		 * @param	yRange: Array,Y周方向的范围。yRange[0]-Y轴的最小值;yRange[1]-Y轴的最大值。如果yRange[0]或yRange[1]未定义,则不限制
		 * @param	delayedInterval: [INT]延迟响应拖拽的时间间隔(毫秒)。(比如想在按下鼠标之后再过100ms,如果此时还未松开鼠标,则响应拖动)
		 * @param	useShadow: true-使用影子表示拖动效果,被拖动的原对象在鼠标移动过程中不动,直到松开鼠标后将原对象移动到鼠标位置处;false(默认)-在移动鼠标的过程中直接拖动原对象
		 * 		  }
		 */
		registerDrag : function(param) {
			var mindMap = this;
			if (param==null || param.target==null) {
				showMessageBox(_lang("mindmap.message.drag.regist.error.targetnull"));
				return false;
			}			
			var defParam = {
				canXMove: true,
				canYMove: true,	
				interval: 200,
				useShadow: false
			};
			var exParam = $.extend(defParam, param);
			param.target.data("settings", exParam);					
			
			param.target.mousedown(function(dragPos) {
				var targetObj = this;
				//定义注册拖拽事件的初始化信息
				function doRespondMouseDown() {
					var dragTarget = $(targetObj);
					//如果使用影子拖动效果,则克隆当前拖动对象
					var moveTarget = dragTarget;					
					if (exParam.useShadow) {
						moveTarget = $("<div class='mindmap_move_shadow'></div>");
						moveTarget.css({
							width: dragTarget.width() + "px",
							height: dragTarget.height() + "px",
							left: dragTarget.css("left"),
							top: dragTarget.css("top")
						});
						mindMap.container.append(moveTarget);
					}
					$(targetObj).data({
						clientX : dragPos.clientX,
						clientY : dragPos.clientY,
						actionTime : (new Date()).getTime(),	//记录本次的时间戳
						moveTarget : moveTarget		//保存移动的对象信息
					});
					window.dragTarget = $(targetObj);
					//执行鼠标按下事件的回调函数
					if (exParam.mouseDownCallback!=undefined && typeof exParam.mouseDownCallback=="function") {
						exParam.mouseDownCallback();
					}
				}				
				
				//如果设置了延迟响应拖拽,则设置在延迟时间后再执行拖拽初始化动作
				if (exParam.delayedInterval!=undefined && parseInt(exParam.delayedInterval)!='NaN') {
					window.dragDelayTimer = setTimeout(doRespondMouseDown, exParam.delayedInterval);
				} else {
					doRespondMouseDown();
				}
			});
			
			//判断是否已经初始化拖动相关的组件
			if (!window.isDragComponentInitialized) {
				window.isDragComponentInitialized = true;
				$(window).mousemove(function(dragPos) {
					//如果已经有拖动对象(唯一的)
					if (window.dragTarget) {
						var target = window.dragTarget;
						var moveTarget = target.data("moveTarget");
						var settings = target.data("settings");																					
																
						var offsetX = settings.canXMove ? (dragPos.clientX - target.data("clientX")) : 0,	//X轴移动量
							offsetY = settings.canYMove ? (dragPos.clientY - target.data("clientY")) : 0;	//y轴移动量
						
						var lastLeft = parseFloat(moveTarget.css("left"));	//移动前的X轴坐标
						var lastTop = parseFloat(moveTarget.css("top"));	//移动前的Y轴坐标
						var movedLeft = lastLeft + offsetX;		//移动后的X轴坐标
						var movedTop = lastTop + offsetY;		//移动后的Y轴坐标						
						
						//判断是否超出移动范围。如果超出移动范围,则不动
						var xRange1 = (settings.xRange && settings.xRange.length>0) ? settings.xRange[0] : movedLeft;
						var xRange2 = (settings.xRange && settings.xRange.length>1) ? settings.xRange[1] : movedLeft;						
						var yRange1 = (settings.yRange && settings.yRange.length>0) ? settings.yRange[0] : movedTop;
						var yRange2 = (settings.yRange && settings.yRange.length>1) ? settings.yRange[1] : movedTop;							
						
						//打印debug信息
						mindMap.debug(["Move Des Pos: (" + movedLeft + "," + movedTop + ")", 
												"Move Range: xRange[" + xRange1 + "~" + xRange2 + "], yRange[" + yRange1 + "~" + yRange2 + "]"]);
						
						//如果未超出范围,则移动目标对象,并记录当前的鼠标坐标
						if (movedLeft>=xRange1 && movedLeft<=xRange2 && movedTop>=yRange1 && movedTop<=yRange2) {
							moveTarget.css({
								left: movedLeft,
								top: movedTop
							});
							target.data({
								clientX: dragPos.clientX,
								clientY: dragPos.clientY
							});
						}
						
						if (settings.mouseMoveCallback!=null && typeof settings.mouseMoveCallback == "function") {
							var now = (new Date()).getTime();
							var lastActionTime = target.data("actionTime");		//上一次动作执行时间	
							//如果是已经过了最小间隔时间段,则响应鼠标移动回调函数					
							mindMap.debug(["lastActionTime:" + lastActionTime + (lastActionTime==null)], true);
							if (lastActionTime==null || (now - lastActionTime > settings.interval)) {
								settings.mouseMoveCallback({left:movedLeft, top:movedTop});
							}
						}						
					}					
				});
				$(window).mouseup(function(dragPos) {
					//此处为处理在还未过拖拽响应延迟时间间隔之前就松开了鼠标的情况(这种情况直接取消拖拽注册即可)
					if (window.dragDelayTimer) {
						clearTimeout(window.dragDelayTimer);
						window.dragDelayTimer = null;
					}
					if (window.dragTarget) {
						var target = window.dragTarget;						
						var settings = target.data("settings");		
						if (settings.mouseUpCallback && typeof settings.mouseUpCallback == "function") {
							settings.mouseUpCallback();
						}
						//如果是使用的影子拖动效果,则需要删除影子对象
						if (settings.useShadow) {
							var moveTarget = target.data("moveTarget");							
							if (moveTarget != null) {
								target.css({
									left: moveTarget.css("left"),
									top: moveTarget.css("top")
								});
								moveTarget.remove();
							}							
						}
						window.dragTarget = null;
					}					
				});					
			}										
		},


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值