一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库,而我们有时候又得实现某个div层的拖动,这时候这个东东就派上用场了。。。

上传附件上传了好几次 上不去 。。。 贴代码吧/**
* js拖动类 目前一个对象只能够使一个容器得到拖动
* @author yulipu

* 用法1 普通div
* <div id="outer">
* 这里是内容
* </div>
* var drag = new YDrag();
* drag.drag({
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象
* dragX : false, //不允许横向拖动
* dragY : true
* });
*
* 用法2 模拟对话框
* <div id="outer">
* <div id="title">这里是标题</div>
* <div>这里是内容</div>
* </div>
* var drag = new YDrag();
* drag.drag({
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象
* srcDragObj : document.getElementById('title'), //非必须项 指定标题部分div
* dragX:false, //不允许横向拖动
* callback : function(){
//alert(this.x); // x坐标
//alert(this.y); // y坐标
} //指定一个回调函数 这个函数可以得到当前容器坐标位置
* });
*/
function YDrag() {
var diffX = 0; //当前鼠标和容器left距离的差 当前位置-这个差值就是容器的left值
var diffY = 0;
var _self = this;
var options = {};

var yE = {
/**
* 添加事件
* @param ele 要添加事件的元素
* @param type 事件类型 如click
* @param fun 回调函数
*/
bind : function(ele, type, fun) {
if(ele.addEventListener) { //FF
ele.addEventListener(type, fun, false);
}else if(ele.attachEvent) { //IE
ele.attachEvent('on' + type, fun);
} else { //DOM
ele['on'+type] = fun;
}
},

/**
* 删除事件
*/
unbind : function(ele, type, fun) {
if(ele.removeEventListener) {
ele.removeEventListener(type, fun, false);
} else if(ele.detachEvent) {
ele.detachEvent('on' + type, fun);
} else {
ele['on'+type] = null;
}
}
};

this._mousedown = function(e) {
e = e || window.event;
options.targetDragObj.style.position = 'absolute';

diffX = e.clientX - options.targetDragObj.offsetLeft; //初始化差值
diffY = e.clientY - options.targetDragObj.offsetTop;
yE.bind(document, 'mousemove', _self._mousemove); //往document上添加事件 当鼠标在document范围内移动式都触发移动事件
yE.bind(document, 'mouseup', _self._mouseup);
};

this._mousemove = function(e) {
e = e || window.event;
if(options.dragable) {
options.dragX && (options.targetDragObj.style.left = e.clientX - diffX + 'px');
options.dragY && (options.targetDragObj.style.top = e.clientY - diffY + 'px');
if(options.callback){
//返回当前容器坐标
var obj = {'x' : e.clientX - diffX, 'y' : e.clientY - diffY};
options.callback.call(obj);
}
}
};

this._mouseup = function(e) {
yE.unbind(document, 'mousemove', _self._mousemove);
yE.unbind(document, 'mouseup', _self._mouseup);
};

this.drag = function(opt) {
options = {
dragable : true,
targetDragObj : opt.targetDragObj,
srcDragObj : opt.srcDragObj,
dragX : opt.dragX != false, //横向拖动
dragY : opt.dragY != false, //纵向拖动
callback : opt.callback
};
if(options.srcDragObj) {options.srcDragObj.style.cursor='move';} else {options.targetDragObj.style.cursor='move'}
undefined == options.srcDragObj ?
yE.bind(options.targetDragObj, 'mousedown', this._mousedown) :
yE.bind(options.srcDragObj, 'mousedown', this._mousedown);
};
}

评论() 相关

收藏

赞

nong_zai

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。