一键拥有10个城市分站
关键词免费占领百度首页
关于js拖拽早已是老生常谈,网上一搜一大坨,但是有很多并不是很完善,或者兼容性不够,或者功能不全,并且这样的东西还是自己写的好用。我打算在(一)中主要对js拖拽功能的注意点进行罗列,力求简单;在(二)中利用(一)的拖拽去实现类似google个性化首页的拖拽模块功能。 首先贴上完整code(IE/FF/Chrome) |
<!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></title> <script type="text/javascript"> var Common = { getEvent: function() {//ie/ff if (document.all) { return window.event; } func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; }, getMousePos: function(ev) { if (!ev) { ev = this.getEvent(); } if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } if (document.documentElement && document.documentElement.scrollTop) { return { x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop }; } else if (document.body) { return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } }, getItself: function(id) { return "string" == typeof id ? document.getElementById(id) : id; }, getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight }, isIE: document.all ? true : false, setOuterHtml: function(obj, html) { var Objrange = document.createRange(); obj.innerHTML = html; Objrange.selectNodeContents(obj); var frag = Objrange.extractContents(); obj.parentNode.insertBefore(frag, obj); obj.parentNode.removeChild(obj); } } ///------------------------------------------------------------------------------------------------------ var Class = { create: function() { return function() { this.init.apply(this, arguments); } } } var Drag = Class.create(); Drag.prototype = { init: function(titleBar, dragDiv, Options) { //设置点击是否透明,默认不透明 titleBar = Common.getItself(titleBar); dragDiv = Common.getItself(dragDiv); this.dragArea = { maxLeft: 0, maxRight: Common.getViewportSize.w - dragDiv.offsetWidth - 2, maxTop: 0, maxBottom: Common.getViewportSize.h - dragDiv.offsetHeight - 2 }; if (Options) { this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100; this.keepOrigin = Options.keepOrigin ? ((Options.keepOrigin == true || Options.keepOrigin == false) ? Options.keepOrigin : false) : false; if (this.keepOrigin) { this.opacity = 50; } if (Options.area) { if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left }; if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right }; if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top }; if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom }; } } else { this.opacity = 100, this.keepOrigin = false; } this.originDragDiv = null; this.tmpX = 0; this.tmpY = 0; this.moveable = false; var dragObj = this; titleBar.onmousedown = function(e) { var ev = e || window.event || Common.getEvent(); //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0 if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } else { return false; } if (dragObj.keepOrigin) { dragObj.originDragDiv = document.createElement("div"); dragObj.originDragDiv.style.cssText = dragDiv.style.cssText; dragObj.originDragDiv.style.width = dragDiv.offsetWidth; dragObj.originDragDiv.style.height = dragDiv.offsetHeight; dragObj.originDragDiv.innerHTML = dragDiv.innerHTML; dragDiv.parentNode.appendChild(dragObj.originDragDiv); } dragObj.moveable = true; dragDiv.style.zIndex = dragObj.GetZindex() + 1; var downPos = Common.getMousePos(ev); dragObj.tmpX = downPos.x - dragDiv.offsetLeft; dragObj.tmpY = downPos.y - dragDiv.offsetTop; titleBar.style.cursor = "move"; if (Common.isIE) { dragDiv.setCapture(); } else { window.captureEvents(Event.MOUSEMOVE); } dragObj.SetOpacity(dragDiv, dragObj.opacity); //FireFox 去除容器内拖拽图片问题 if (ev.preventDefault) { ev.preventDefault(); ev.stopPropagation(); } document.onmousemove = function(e) { if (dragObj.moveable) { var ev = e || window.event || Common.getEvent(); //IE 去除容器内拖拽图片问题 if (document.all) //IE { ev.returnValue = false; } var movePos = Common.getMousePos(ev); dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px"; dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px"; } }; document.onmouseup = function() { if (dragObj.keepOrigin) { if (Common.isIE) { dragObj.originDragDiv.outerHTML = ""; } else { Common.setOuterHtml(dragObj.originDragDiv, ""); } } if (dragObj.moveable) { if (Common.isIE) { dragDiv.releaseCapture(); } else { window.releaseEvents(Event.MOUSEMOVE); } dragObj.SetOpacity(dragDiv, 100); titleBar.style.cursor = "default"; dragObj.moveable = false; dragObj.tmpX = 0; dragObj.tmpY = 0; } }; } }, SetOpacity: function(dragDiv, n) { if (Common.isIE) { dragDiv.filters.alpha.opacity = n; } else { dragDiv.style.opacity = n / 100; } }, GetZindex: function() { var maxZindex = 0; var divs = document.getElementsByTagName("div"); for (z = 0; z < divs.length; z++) { maxZindex = Math.max(maxZindex, divs[z].style.zIndex); } return maxZindex; } } window.onload = function() { new Drag("dragDiv", "dragDiv", { opacity: 100, keepOrigin: true }); //, area: { left: 50, right: 500, top: 100, bottom: 400} } </script> </head> <body> <div id="dragDiv" style="position:absolute; background-color:#FFFFFF;border:solid 1px #849BCA;width:200px;left:10px;top:10px;filter:alpha(opacity=100);opacity:1;"> <table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse; "> <tr id="titleBar" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;"> <th align="left" unselectable="on" >Title</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" unselectable="on"> <td><img src="http://www.iisp.com/images/v4/logo.gif" alt="pic for drag" /> Content...</td> <!----> </tr> </table> </div> <div style="position:absolute; font-family:Tahoma;border:solid 1px #849BCA; background-color:#AAAAAA;width:200px;height:100px;left:210px;top:210px;filter:alpha(opacity=100);opacity:1; z-index:999">Are you able to cover me?</div> </body> </html> |
对Drag的使用:在window.onload中,必填参数是titleBar和dragDiv,后者是要拖拽的容器,前者是拖拽容器的可拖拽部位,譬如经常遇到的通过标题栏拖动整个DIV,则titleBar即为改标题栏。而{ opacity: 100, keepOrigin: true , area: { left: 50, right: 500, top: 100, bottom: 400}} 是可选参数,用于扩展功能,opacity设置透明度,keepOrigin设置拖拽过程中是否保留原来拖拽容器,area设置拖拽范围。
|
旗下网站:耐思智慧 - 淘域网 - 我的400电话 - 中文域名:耐思尼克.cn 耐思尼克.top
耐思智慧 © 版权所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved
备案号码: 粤ICP备09063828号 公安备案号: 粤公网安备 44049002000123号 域名注册服务机构许可:粤D3.1-20240003 CN域名代理自深圳万维网
声明:本网站中所使用到的其他各种版权内容,包括但不限于文章、图片、视频、音频、字体等内容版权归原作者所有,如权利所有人发现,请及时告知,以便我们删除版权内容
本站程序界面、源代码受相关法律保护, 未经授权, 严禁使用; 耐思智慧 © 为我公司注册商标, 未经授权, 严禁使用