js拖拽建站程序例子

時間: 2013-05-27 14:09:52 點擊數: 76640 來源: 耐思智慧

　　關于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://m.alapot.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設置拖拽范圍。

拖拽的基本原理：當mousedown時記下鼠標點擊位置離拖拽容器左邊沿的距離和上邊沿的距離，即tmpX,tmpY；mousemove時通過定位拖拽容器的style.left/style.top，使拖拽容器進行移動，定位到哪里則由剛剛的tmpX/tmpY和當前鼠標所在位置計算得出；mouseup時，結束移動。
“var dragObj = this;” 這句是為了在mousedown/mouseup/mousemove事件里對Drag對象的相關變量進行引用。因為在mousedown/mouseup/mousemove里的this是window.
當拖拽速度太快導致鼠標移出拖拽容器，而拖拽容器位置未變，用document.mousemove代替titleBar.mousemove即可。
設置拖拽容器可拖拽的范圍，若未設置，則默認為當前窗口可視范圍。Note：在設置范圍的時候使用Math.max/min來處理，而不是用If語句判斷，用后者的話會導致快速拖拽時未達到容許范圍邊沿即停止的狀況。
當拖拽過程中，可設置是否保留原來拖拽容器，當拖拽結束，隱藏原來容器，默認不保留。
當拖拽時，可設置拖拽的容器是否透明及透明度多少，默認不透明。但若拖拽過程中設置保留原來拖拽容器，即keepOrigin: true，則設置透明度為50%。
使右鍵、鼠標中鍵等不能拖動，僅左鍵單擊可以拖動。Note：IE鼠標左鍵為event.Button=1 FireFox為event.Button=0.
解決如果點擊在圖片上無法拖拽的問題：非常杯具的是IE通過ev.cancelBubble=true;ev.returnValue = false;來防止圖片的事件，注意是放在document.onmousemove中，而FireFox通過ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
有一種情況，當瀏覽器窗口不是最大化的時候，你希望當鼠標在瀏覽器外移動時，瀏覽器里的拖拽容器仍然移動，這時就要使用鼠標事件捕獲，IE中相應的是dragDiv.setCapture();與dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);與window.releaseEvents(Event.MOUSEMOVE) 。
確保每次拖拽時拖拽容器的zindex都不會被其他塊元素覆蓋。