200

js拖拽建站程序例子

时间: 2013-05-27 14:09:52   点击数: 71840

js拖拽建站程序例子

  关于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://idc.bo-yi.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设置拖拽范围。

  1. 拖拽的基本原理:当mousedown时记下鼠标点击位置离拖拽容器左边沿的距离和上边沿的距离,即tmpX,tmpY;mousemove时通过定位拖拽容器的style.left/style.top,使拖拽容器进行移动,定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在位置计算得出;mouseup时,结束移动。
  2. “var dragObj = this;” 这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown/mouseup/mousemove里的this是window.
  3. 当拖拽速度太快导致鼠标移出拖拽容器,而拖拽容器位置未变,用document.mousemove代替titleBar.mousemove即可。
  4. 设置拖拽容器可拖拽的范围,若未设置,则默认为当前窗口可视范围。Note:在设置范围的时候使用Math.max/min来处理,而不是用If语句判断,用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
  5. 当拖拽过程中,可设置是否保留原来拖拽容器,当拖拽结束,隐藏原来容器,默认不保留。
  6. 当拖拽时,可设置拖拽的容器是否透明及透明度多少,默认不透明。但若拖拽过程中设置保留原来拖拽容器,即keepOrigin: true,则设置透明度为50%。
  7. 使右键、鼠标中键等不能拖动,仅左键单击可以拖动。Note:IE鼠标左键为event.Button=1 FireFox为event.Button=0.
  8. 解决如果点击在图片上无法拖拽的问题:非常杯具的是IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件,注意是放在document.onmousemove中,而FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
  9. 有一种情况,当浏览器窗口不是最大化的时候,你希望当鼠标在浏览器外移动时,浏览器里的拖拽容器仍然移动,这时就要使用鼠标事件捕获,IE中相应的是dragDiv.setCapture();与dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);与window.releaseEvents(Event.MOUSEMOVE) 。
  10. 确保每次拖拽时拖拽容器的zindex都不会被其他块元素覆盖。
上一篇:做论坛好还是做网站好 下一篇:网站建设中网站系统开发建设与管理的技术和方法

关注建材之家
www.bo-yi.com
全国服务热线:400-0755-393
加盟咨询电话:0755-82034561
投诉建议Q Q:275171283
讨论互动QQ群:64982759
点击查看放大的二维码
报料号:jc68_com
点击查看放大的二维码
服务号:jc68-1
点击查看放大的二维码
移动端二维码
腾讯微博
腾讯微博
新浪微博
新浪微博

深圳建材 揭阳建材 佛山建材 香港建材 广州建材 东莞建材 惠州建材 南宁建材 海南建材 重庆建材 成都建材 石家庄建材
昆明建材 拉萨建材 大连建材 西安建材 兰州建材 西宁建材 银川建材 乌鲁木齐 郑州建材 武汉建材 长沙建材 哈尔滨建材
南京建材 杭州建材 合肥建材 福州建材 南昌建材 济南建材 无锡建材 宁波建材 温州建材 厦门建材 青岛建材 呼和浩特建材
北京建材 天津建材 上海建材 烟台建材 沈阳建材 长春建材 贵阳建材 太原建材

以下js为测试信息