自己写的一个js注册拖动对象的函数
2013-12-20 16:22
696 查看
下面是自己写的一个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; } }); } },
相关文章推荐
- javascript 预编译
- 译文:Javascript-Functions
- JSP中页面定时刷新
- 浅谈javascript六种数据类型以及特殊注意点
- javascript模拟实现sleep函数
- JSP文件下载及getOutputStream() has already been的解决
- jsp入门
- C#+javascript 拼音简码形成 文本焦点失去的时候触发该事件
- SharePoint 2010/2013 使用Javascript来判断权限的三种方法
- 百度地图常用功能开发JS1.4版
- javascript进阶之对象篇(3)函数与自定义”类“
- JavaScript闭包中的静态方法和普通方法调用方式
- javascript遍历对象属性和方法
- JS 数据类型转换
- JavaScript 创建类/对象的几种方式
- ExtJS参考手册
- js 六种数据类型的区别及bool 转换判断
- js生成随机数之random函数随机示例
- js正则匹配多个匹配的最后一个匹配---$和的g用法
- 第一个JavaScript程序