首页 > 代码库 > 完整的网页浮动层拖动实例代码
完整的网页浮动层拖动实例代码
一个供学习不错的网页拖动层,具有丰富的层拖动设置功能,比如可设置拖动的范围、垂直、水平方向拖动,是否透明显示层等,运用JS和CSS等实现的HTML层拖动网页,代码完整:前端框架资源分享
.代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>一款很不错的Js控制div层拖动/拖放代码</title>
- </head>
- <body>
- <script>
- var isIE = (document.all) ? true : false;
- var $ = function (id) {
- return "string" == typeof id ? document.getElementById(id) : id;
- };
- var Class = {
- create: function() {
- return function() { this.initialize.apply(this, arguments); }
- }
- }
- var Extend = function(destination, source) {
- for (var property in source) {
- destination[property] = source[property];
- }
- }
- var Bind = function(object, fun) {
- return function() {
- return fun.apply(object, arguments);
- }
- }
- var BindAsEventListener = function(object, fun) {
- return function(event) {
- return fun.call(object, (event || window.event));
- }
- }
- var CurrentStyle = function(element){
- return element.currentStyle || document.defaultView.getComputedStyle(element, null);
- }
- function addEventHandler(oTarget, sEventType, fnHandler) {
- if (oTarget.addEventListener) {
- oTarget.addEventListener(sEventType, fnHandler, false);
- } else if (oTarget.attachEvent) {
- oTarget.attachEvent("on" + sEventType, fnHandler);
- } else {
- oTarget["on" + sEventType] = fnHandler;
- }
- };
- function removeEventHandler(oTarget, sEventType, fnHandler) {
- if (oTarget.removeEventListener) {
- oTarget.removeEventListener(sEventType, fnHandler, false);
- } else if (oTarget.detachEvent) {
- oTarget.detachEvent("on" + sEventType, fnHandler);
- } else {
- oTarget["on" + sEventType] = null;
- }
- };
- var Drag = Class.create();
- Drag.prototype = {
- //拖放对象
- initialize: function(drag, options) {
- this.Drag = $(drag);//拖放对象
- this._x = this._y = 0;//记录鼠标相对拖放对象的位置
- this._marginLeft = this._marginTop = 0;//记录margin
- //事件对象(用于绑定移除事件)
- this._fM = BindAsEventListener(this, this.Move);
- this._fS = Bind(this, this.Stop);
- this.SetOptions(options);
- this.Limit = !!this.options.Limit;
- this.mxLeft = parseInt(this.options.mxLeft);
- this.mxRight = parseInt(this.options.mxRight);
- this.mxTop = parseInt(this.options.mxTop);
- this.mxBottom = parseInt(this.options.mxBottom);
- this.LockX = !!this.options.LockX;
- this.LockY = !!this.options.LockY;
- this.Lock = !!this.options.Lock;
- this.onStart = this.options.onStart;
- this.onMove = this.options.onMove;
- this.onStop = this.options.onStop;
- this._Handle = $(this.options.Handle) || this.Drag;
- this._mxContainer = $(this.options.mxContainer) || null;
- this.Drag.style.position = "absolute";
- //透明
- if(isIE && !!this.options.Transparent){
- //填充拖放对象
- with(this._Handle.appendChild(document.createElement("div")).style){
- width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;
- }
- }
- //修正范围
- this.Repair();
- addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
- },
- //设置默认属性
- SetOptions: function(options) {
- this.options = {//默认值
- Handle: "",//设置触发对象(不设置则使用拖放对象)
- Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数)
- mxLeft: 0,//左边限制
- mxRight: 9999,//右边限制
- mxTop: 0,//上边限制
- mxBottom: 9999,//下边限制
- mxContainer: "",//指定限制在容器内,也就是一定范围内拖动
- LockX: false,//是否锁定水平方向拖放
- LockY: false,//是否锁定垂直方向拖放
- Lock: false,//是否锁定
- Transparent: false,//是否透明显示拖动层
- onStart: function(){},//开始移动时执行
- onMove: function(){},//移动时执行
- onStop: function(){}//结束移动时执行
- };
- Extend(this.options, options || {});
- },
- //开始准备拖动
- Start: function(oEvent) {
- if(this.Lock){ return; }
- this.Repair();
- //记录鼠标相对拖放对象的位置
- this._x = oEvent.clientX - this.Drag.offsetLeft;
- this._y = oEvent.clientY - this.Drag.offsetTop;
- //记录margin
- this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
- this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
- //mousemove时移动 mouseup时停止
- addEventHandler(document, "mousemove", this._fM);
- addEventHandler(document, "mouseup", this._fS);
- if(isIE){
- //焦点丢失
- addEventHandler(this._Handle, "losecapture", this._fS);
- //设置鼠标捕获
- this._Handle.setCapture();
- }else{
- //焦点丢失
- addEventHandler(window, "blur", this._fS);
- //阻止默认动作
- oEvent.preventDefault();
- };
- //附加程序
- this.onStart();
- },
- //修正范围
- Repair: function() {
- if(this.Limit){
- //修正错误范围参数
- this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
- this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
- //如果有容器必须设置position为relative或absolute来相对或绝对定位,并在获取offset之前设置
- !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
- }
- },
- //拖动
- Move: function(oEvent) {
- //判断是否锁定
- if(this.Lock){ this.Stop(); return; };
- //清除选择
- window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
- //设置移动参数
- var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
- //设置范围限制
- if(this.Limit){
- //设置范围参数
- var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
- //如果设置了容器,再修正范围参数
- if(!!this._mxContainer){
- mxLeft = Math.max(mxLeft, 0);
- mxTop = Math.max(mxTop, 0);
- mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
- mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
- };
- //修正移动参数
- iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
- iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
- }
- //设置位置,并修正margin
- if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
- if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
- //附加程序
- this.onMove();
- },
- //停止拖动
- Stop: function() {
- //移除事件
- removeEventHandler(document, "mousemove", this._fM);
- removeEventHandler(document, "mouseup", this._fS);
- if(isIE){
- removeEventHandler(this._Handle, "losecapture", this._fS);
- this._Handle.releaseCapture();
- }else{
- removeEventHandler(window, "blur", this._fS);
- };
- //附加程序
- this.onStop();
- }
- };
- </script>
- <style>
- #idContainer{ border:10px solid #990000; width:600px; height:300px;}
- #idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; top:50px; left:50px;}
- #idHandle{cursor:move; height:25px; background:#0000FF; overflow:hidden;}
- </style>
- <div id="idContainer">
- <div id="idDrag"><div id="idHandle"></div></div>
- </div>
- <input id="idReset" type="button" value=http://www.mamicode.com/"复位" />
- <input id="idLock" type="button" value=http://www.mamicode.com/"锁定" />
- <input id="idLockX" type="button" value=http://www.mamicode.com/"锁定水平" />
- <input id="idLockY" type="button" value=http://www.mamicode.com/"锁定垂直" />
- <input id="idLimit" type="button" value=http://www.mamicode.com/"范围锁定" />
- <input id="idLimitOff" type="button" value=http://www.mamicode.com/"取消范围锁定" />
- <br />拖放状态:<span id="idShow">未开始</span>
- <script>
- var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,
- onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
- onMove: function(){ $("idShow").innerHTML = "left:"+this.Drag.offsetLeft+";top:"+this.Drag.offsetTop; },
- onStop: function(){ $("idShow").innerHTML = "结束拖放"; }
- });
- $("idReset").onclick = function(){
- drag.Limit = true;
- drag.mxLeft = drag.mxTop = 0;
- drag.mxRight = drag.mxBottom = 9999;
- drag.LockX = drag.LockY = drag.Lock = false;
- }
- $("idLock").onclick = function(){ drag.Lock = true; }
- $("idLockX").onclick = function(){ drag.LockX = true; }
- $("idLockY").onclick = function(){ drag.LockY = true; }
- $("idLimit").onclick = function(){ drag.mxRight = drag.mxBottom = 200;drag.Limit = true; }
- $("idLimitOff").onclick = function(){ drag.Limit = false; }
- </script>
- </body>
- </html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。