<!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">
<title>JavaScript Google IG Drag Demo</title>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="keywords" content="JavaScript 拖拽 Drag Demo google" />
<meta name="author" content="Phzzy (PhzzyZhou [At] gmail [dot] com)" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="google_drag.js"></script>
<script type="text/javascript" language="javascript">
//获取浏览器类型
function getBrowserOS()
{
if(navigator.userAgent.indexOf('MSIE')>-1)return 'MSIE';
if(navigator.userAgent.indexOf('Firefox')>-1)return 'Firefox';
if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 'Safari';
if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 'Camino';
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 'Gecko';
if(navigator.userAgent.indexOf('Opera')>-1)return 'Opera';
return 'Other';
}
</script>
<script type="text/javascript" language="javascript">
//获取值
DragUtil.getSortIndex = function(){
var col_array = [ 'col_div1' , 'col_div2'];
var sortIndex = '';
for(var i = 0; i < col_array.length ; i++)
{
sortIndex += col_array[i] + ":";
var childs = document.getElementsByClassName('hiddvalue' , col_array[i]);
for(var j = 0 ; j < childs.length ; j++)
{
if(!Element.hasClassName(childs[j] , 'no_drag'))
{
sortIndex += childs[j].value + ',' ;
}
}
sortIndex += "\n";
}
return sortIndex;
}
function GetData()
{
}
function Showupdate( a1, a2, a3)
{
EditPage = document.getElementById('divshow');
var scrollPos;
if (typeof window.pageYOffset != 'undefined')
{
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined')
{
scrollPos = document.body.scrollTop;
}
EditPage.style.top = scrollPos + 20 +"px";
EditPage.style.zIndex= 101;
EditPage.style.display = '';
//添加一个层，用于挡住以前的东西
BackDiv = document.createElement('DIV');
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY)
{
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else
{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
BackDiv.style.cssText = 'position:absolute;background-color: #ffffff; top: 0px; left:0px; width: '+ xScroll + 'px; height:'+ yScroll + 'px;';
BackDiv.id = 'divback';
//设置页面透明
if(getBrowserOS().toUpperCase() == 'FIREFOX')
{
BackDiv.style.MozOpacity = '0.8';
}
else
{
BackDiv.style.filter="alpha(opacity=80)";
}
document.body.appendChild(BackDiv);
EditTitle = document.getElementById('lbltitle');
EditTitle.innerHTML = a1;
}
function EditClose()
{
EditPage = document.getElementById('divshow');
BackDiv = document.getElementById('divback');
EditPage.style.display = 'none';
//设置页面透明
BackDiv.parentNode.removeChild(BackDiv);
}
</script>
<style type="text/css">
#title{ border-bottom:1px solid #bbb; font-size:12px; padding:0 0 10px;}
#title h1{ font-size:16px;}
#title #intro{}
#center{ width:800px; margin:auto}
#col_div1{ float:left; width:400px; color:#000000;}
#col_div2{ float:right; width:400px; color:#000000;}
.drag_div , .modbox{ width:95%; margin:10px auto; border:1px solid #1b243d; padding:0px;}
.drag_header{ font-weight:bold; border-bottom:1px solid #000000; }
.drag_content{ height:40px; padding:5px;cursor:pointer; background:#FFFFFF}
.no_drag{ height:0px; overflow:hidden; padding:0; border:0;}
</style>
</head>
<body>
<div id="title">
<h1>
JavaScript Google IG Drag Demo</h1>
<div id="intro">
<strong>Author:</strong> <a href="http://www.phzzy.org" title="Phzzy.ORG">Phzzy</a><br />
<strong>Last Modify:</strong> 2007-01-24 22:20<br />
这是一个关于 JavaScript 仿 google 个性化主页拖拽效果的简单的 Demo，在 IE 6 , FireFox 1.5 , Opera 9 下测试通过。<br />
文章链接： <a href="http://www.phzzy.org/blog/drag-google-ig/" title="JavaScript Drag">http://www.phzzy.org/blog/drag-google-ig/</a>
<input type="button" value="遍历所有可拖拽元素，获得顺序" onclick="javascript:alert(DragUtil.getSortIndex());" />
</div>
</div>
<div id="center">
<div id="col_div1" class="col_div">
<!-- 用 JavaScript 绘制 5 个 div -->
<script type="text/javascript">
for(var i = 0 ; i < 9 ; i++)
{
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#F50;">'
+ '<input class="hiddvalue" value="value_'+i+'" type="hidden" />'
+ '<div id="drag_' + i + '_h" class="drag_header" >Header #' + i + '</div>'
+ '<div class="drag_content" onclick="Showupdate('+i+','+i+','+i+')">Content #' + i + '</div>'
+ '</div>');
}
</script>
<!-- 隐藏的 div ，用来修复不能拖到一个元素后面的 bug -->
<div id="col_1_hidden_div" class="drag_div no_drag">
<div id="col_1_hidden_div_h">
</div>
</div>
</div>
<div id="col_div2" class="col_div">
<script type="text/javascript">
for(var i = 10 ; i < 19 ; i++){
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#00CC00;">'
+ '<input class="hiddvalue" value="value_' + i + '" type="hidden" />'
+ '<div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div>'
+ '<div class="drag_content" onclick="Showupdate('+i+','+i+','+i+')">Content #' + i + '</div>'
+ '</div>');
}
</script>
<!-- 隐藏的 div ，用来修复不能拖到一个元素后面的 bug -->
<div id="col_2_hidden_div" class="drag_div no_drag">
<div id="col_2_hidden_div_h">
</div>
</div>
</div>
<!-- 编辑页面 -->
<div style="z-index: 101; left: 100px; position: absolute; width: 798px; height: 536px;
display: none; background-color: #ffffff; border: #72899D 1px solid; top: 20px;"
id="divshow" align="center">
<table>
<tr>
<td style="width: 342px">
</td>
<td align="right" style="width: 342px">
<input id="btnEditClose" type="button" onclick="EditClose()" value="关闭" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label id="lbltitle">
</label>
</td>
