首页 > 代码库 > dialog
dialog
<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="miniDrag.js"></script> <style type="text/css"> #dragBody{width: 300px;height: 200px; background: white; color: #333; position: relative;} #dragHandler{height: 40px; line-height: 40px; background: #333; color: white; position: relative;} #hoverEff{width: 200px;height: 200px;border: 1px solid;} #dragclose { text-decoration: none; color: white; display: block; width: 40px; height: 40px; text-align: center; position: absolute; right: 0; top: 0; } #dragclose:hover { background: #f5f5f5; color: #333; } body { background: #A9A9A9; } </style> <script type="text/javascript"> window.onload=function(){ var dragBody = document.getElementById("dragBody"); var dragHandler = document.getElementById("dragHandler"); var dragclose = document.getElementById("dragclose"); dragBody.style.top = "50px"; dragBody.style.left = "50px"; var drag_a = new miniDrag(); drag_a.handler = dragHandler; drag_a.dragBody = dragBody; drag_a.init();} </script></head><body><div id="dragBody"> <div id="dragHandler"></div></body></html>
var miniDrag =function() { this.handler = null; this.dragBody = null; this.preventX = false; this.preventY = false; this.scopeX = false; this.scopeY = false; this.initmouseX = null; this.initmouseY = null; this.initX = null; this.initY = null;};miniDrag.prototype.init = function() { var _this = this, dragBody = this.dragBody, handler = this.handler; handler.onmousedown = function(e){ return _this.start(e)}; //闭包改变this指向 dragBody.onDragStart = new Function(); dragBody.onDragEnd = new Function(); dragBody.onDrag = new Function();};miniDrag.prototype.start = function(e) { e = fixEvent(e); var _this = this, dragBody = this.dragBody, handler = this.handler; this.intmouseX = e.pageX, this.intmouseY = e.pageY; this.initY = parseInt(dragBody.style.top), this.initX = parseInt(dragBody.style.left); document.onmousemove = function(e){return _this.dragging(e)}; document.onmouseup = function(e){return _this.end(e)}; dragBody.onDragStart(this.initY,this.initX); return false; //重要，避免不同实例事件冲突};miniDrag.prototype.dragging = function(e) { e = fixEvent(e); var _this = this, dragBody = this.dragBody, handler = this.handler; if (document.all) { handler.setCapture(); } else { e.preventDefault(); } if(!_this.preventY) { var top = _this.initY + e.pageY - _this.intmouseY; if(top < parseInt(_this.scopeY[0])){top = _this.scopeY[0]}; if(top > parseInt(_this.scopeY[1])){top = _this.scopeY[1]}; dragBody.style.top = top + "px"; } if(!_this.preventX) { var left = this.initX + e.pageX - this.intmouseX; if(left < parseInt(_this.scopeX[0])){left = _this.scopeX[0]}; if(left > parseInt(_this.scopeX[1])){left = _this.scopeX[1]}; dragBody.style.left = left + "px"; } dragBody.onDrag(top,left); return false;};miniDrag.prototype.end = function() { var dragBody = this.dragBody; dragBody.onDragEnd(); if (document.all) { this.handler.releaseCapture() }; document.onmousemove = null; document.onmouseup = null;};var fixEvent = function(e) { var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft), st = Math.max(document.documentElement.scrollTop, document.body.scrollTop); if (typeof e == "undefined") e = window.event; if (typeof e.pageX == "undefined") e.pageX = e.clientX + sl + document.body.clientLeft; if (typeof e.pageY == "undefined") e.pageY = e.clientY + st + document.body.clientTop; if (typeof e.layerX == "undefined") e.layerX = e.offsetX; if (typeof e.layerY == "undefined") e.layerY = e.offsetY; return e;};
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。