javascript 拖动div
- WBOY原创
- 2016-06-07 11:44:271040浏览
一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库，而我们有时候又得实现某个div层的拖动，这时候这个东东就派上用场了。。。
上传附件上传了好几次 上不去 。。。 贴代码吧/**<br>
* js拖动类 目前一个对象只能够使一个容器得到拖动<br>
* @author yulipu<br>
<br>
* 用法1 普通div<br>
* <div>
<br>
* 这里是内容<br>
* </div>
<br>
* var drag = new YDrag();<br>
* drag.drag({<br>
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象<br>
* dragX : false, //不允许横向拖动<br>
* dragY : true<br>
* }); <br>
* <br>
* 用法2 模拟对话框<br>
* <div>
<br>
* <div>这里是标题</div>
<br>
* <div>这里是内容</div>
<br>
* </div>
<br>
* var drag = new YDrag();<br>
* drag.drag({<br>
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象<br>
* srcDragObj : document.getElementById('title'), //非必须项 指定标题部分div<br>
* dragX:false, //不允许横向拖动<br>
* callback : function(){<br>
//alert(this.x); // x坐标<br>
//alert(this.y); // y坐标<br>
} //指定一个回调函数 这个函数可以得到当前容器坐标位置 <br>
* }); <br>
*/<br>
function YDrag() {<br>
var diffX = 0; //当前鼠标和容器left距离的差 当前位置-这个差值就是容器的left值<br>
var diffY = 0;<br>
var _self = this;<br>
var options = {};<br>
<br>
var yE = {<br>
/**<br>
* 添加事件<br>
* @param ele 要添加事件的元素<br>
* @param type 事件类型 如click<br>
* @param fun 回调函数<br>
*/<br>
bind : function(ele, type, fun) {<br>
if(ele.addEventListener) { //FF<br>
ele.addEventListener(type, fun, false);<br>
}else if(ele.attachEvent) { //IE<br>
ele.attachEvent('on' + type, fun);<br>
} else { //DOM<br>
ele['on'+type] = fun;<br>
}<br>
},<br>
<br>
/**<br>
* 删除事件<br>
*/<br>
unbind : function(ele, type, fun) {<br>
if(ele.removeEventListener) {<br>
ele.removeEventListener(type, fun, false);<br>
} else if(ele.detachEvent) {<br>
ele.detachEvent('on' + type, fun);<br>
} else {<br>
ele['on'+type] = null;<br>
}<br>
}<br>
};<br>
<br>
this._mousedown = function(e) {<br>
e = e || window.event;<br>
options.targetDragObj.style.position = 'absolute';<br>
<br>
diffX = e.clientX - options.targetDragObj.offsetLeft; //初始化差值<br>
diffY = e.clientY - options.targetDragObj.offsetTop;<br>
yE.bind(document, 'mousemove', _self._mousemove); //往document上添加事件 当鼠标在document范围内移动式都触发移动事件<br>
yE.bind(document, 'mouseup', _self._mouseup);<br>
};<br>
<br>
this._mousemove = function(e) {<br>
e = e || window.event;<br>
if(options.dragable) {<br>
options.dragX && (options.targetDragObj.style.left = e.clientX - diffX + 'px');<br>
options.dragY && (options.targetDragObj.style.top = e.clientY - diffY + 'px');<br>
if(options.callback){<br>
//返回当前容器坐标<br>
var obj = {'x' : e.clientX - diffX, 'y' : e.clientY - diffY};<br>
options.callback.call(obj);<br>
}<br>
}<br>
};<br>
<br>
this._mouseup = function(e) {<br>
yE.unbind(document, 'mousemove', _self._mousemove);<br>
yE.unbind(document, 'mouseup', _self._mouseup);<br>
};<br>
<br>
this.drag = function(opt) {<br>
options = {<br>
dragable : true,<br>
targetDragObj : opt.targetDragObj,<br>
srcDragObj : opt.srcDragObj,<br>
dragX : opt.dragX != false, //横向拖动<br>
dragY : opt.dragY != false, //纵向拖动<br>
callback : opt.callback<br>
};<br>
if(options.srcDragObj) {options.srcDragObj.style.cursor='move';} else {options.targetDragObj.style.cursor='move'}<br>
undefined == options.srcDragObj ? <br>
yE.bind(options.targetDragObj, 'mousedown', this._mousedown) :<br>
yE.bind(options.srcDragObj, 'mousedown', this._mousedown);<br>
};<br>
}
AD：真正免费，域名+虚机+企业邮箱=0元