| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 679 人关注过本帖
标题:[转载]仿Google和Windows Live的拖拽
只看楼主 加入收藏
hangxj
Rank: 6Rank: 6
等 级:贵宾
威 望:29
帖 子:2045
专家分:0
注 册:2006-4-10
收藏
 问题点数:0 回复次数:1 
[转载]仿Google和Windows Live的拖拽

仿Google和Windows Live的拖拽
转自经典论坛

效果演示:
http://www.google.com/ig
http://www.live.com

代码如下:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{
margin:10px;
}

#dragHelper
{
position:absolute;/*重要*/
border:2px dashed #000000;
background-color:#FFFFFF;
filter: alpha(opacity=30);
}

.normal
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}

.over
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#f3f3f3;
filter: alpha(opacity=50);
}

.dragArea {
CURSOR: move;
}

</style>
</HEAD>

<BODY oncontextmenu="window.event.returnValue=false">
<input type="text" id="evt" name="eventValue" size="40" />
<div id="dragHelper" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.cobao.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.163.com</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.qq.com</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>

</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dragObjs = []; //可以拖拽的元素数组
var dragObjTops = [];

var dragHelper = document.getElementById("dragHelper"); //拖拽时位置框
var dragObj = null; //拖拽对象元素
var dragObjPos = 0;

var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置

var initHeight = 40;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function getPosition(e){ //获取元素相对文档的绝对位置
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};

}

function mouseCoords(ev){ //获取鼠标相对文档的绝对位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置
ev = ev || window.event;

var elementPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}

function mouseDown(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;

if(dragObj){
return;
}


var dragArea = false;
if(target.getAttribute("dragArea")){
dragArea = true;
}

while(!target.getAttribute("isDragObj")){
if(target.tagName=="HTML")
break;
target = target.parentNode;
}

if(dragArea && target.getAttribute("isDragObj")){
dragObj = target;
//重写的目的是让当前对象在最上层
document.body.removeChild(dragObj);
document.body.appendChild(dragObj);

//记录下拖拽对象原始位置
dragObjOffset.left = dragObj.style.left;
dragObjOffset.top = dragObj.style.top;

dragObj.className = dragObj.getAttribute("overClass");
//鼠标在拖拽对象中的相对位置
mouseInDragObjOffset = getMouseOffset(dragObj, ev);

dragHelper.style.left = dragObj.style.left;
dragHelper.style.top = dragObj.style.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";

//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
}
}

function mouseUp(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;

if(dragObj){
dragObj.style.left = dragHelper.style.left;
dragObj.style.top = dragHelper.style.top;

dragHelper.style.display = "none";
dragObj.className = dragObj.getAttribute("dragClass");
dragObj = null;
}

}

function mouseMove(ev){
ev = ev || window.event;

if(dragObj) {
var mousePos = mouseCoords(ev);

/*dragHelper.style.left = dragObjOffset.left;
dragHelper.style.top = dragObjOffset.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";*/

var windowWidth = document.body.offsetWidth; //窗口宽度
var windowHeight = document.body.offsetHeight; //窗口高度

//拖拽对象应该所在当前位置
var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
var dragObjTop = mousePos.y - mouseInDragObjOffset.y;

//增加判断,不然拖拽对象拖出浏览器窗口
if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
dragObj.style.left = dragObjLeft;

if(dragObjTop >=0)
dragObj.style.top = dragObjTop;

repaint();
}
}

//克隆对象
function cloneObject(srcObj, destObj){
destObj = srcObj.cloneNode(true);
}

function makeDraggable(element){
element.setAttribute("isDragObj", "y");
}

function repaint(){
for(i=0; i<dragObjs.length; i++){
if(dragObjs[i] == dragObj){
dragObjPos = i;
dragObjs[i] = dragHelper;
break;
}
}

if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
dragObjs[dragObjPos-1] = dragHelper;
dragObjPos = dragObjPos - 1;
}

if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
dragObjs[dragObjPos+1] = dragHelper;
dragObjPos = dragObjPos + 1;
}
paintDragObjs();
dragObjs[dragObjPos] = dragObj;

}

function paintDragObjs(){
var h = 40;
for(i=0; i<dragObjs.length; i++){
dragObjs[i].style.left = 20;
dragObjs[i].style.top = h;
h += dragObjs[i].offsetHeight + 10;
}
}

function openClose(obj){
obj.innerHTML = obj.innerHTML=="-"?"+":"-";
while(obj.tagName != "TBODY"){
obj = obj.parentNode;
}

for(i=0; i<obj.childNodes.length; i++){
if(obj.childNodes[i].nodeName == "#text"
|| obj.childNodes[i].getAttribute("bar")){ continue; }
obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
}

paintDragObjs();
}

document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;

window.onload = function(){
var objs = document.getElementsByTagName("Div");
for(i=0; i<objs.length; i++){
var item = objs.item(i);
//if(i==1)item.style.height=150;
if(item.getAttribute("overClass")){
makeDraggable(item);
dragObjs.push(item);
item.style.left = 20;
item.style.top = initHeight;
dragObjTops.push(initHeight);
initHeight += item.offsetHeight + 10;
}
}

// dragHelper = document.createElement('DIV');
// dragHelper.style.cssText = 'position:absolute;display:none;';
// document.body.appendChild(dragHelper);
}
//-->
</SCRIPT>
</HTML>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><a href="http://www.google.com" target ... ot;>Google</a>个性化主页拖搁功能(不包含保存功能)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{padding:0;margin:0}
body{font-family:Verdana,sans-serif;font-size:.7em;line-height:1.5em;margin:0; text-align:center;}
h3{ display:block; margin:10px; text-align:left; width:90%;}
h3 a{color:#3169b5;}
#Copy{border-top:#edf2fb 2px solid; width:90%; text-align:left; color:#666666;}
#Copy a{color:#3169b5; text-decoration:none;}
.dragTable{

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

td{vertical-align:top; }
ul{ padding:0; margin:0; list-style:none; }
li{ line-height:120%; color:#3169b5; }

.dragTR{

cursor:move;

color:#7787cc;
text-decoration:underline;

background-color:#e5eef9;
padding:10px 0 10px 5px;


font-weight:bold;

}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

<script defer>


var Drag={dragged:false,

ao:null,

tdiv:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tdiv=document.createElement("div");

Drag.tdiv.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tdiv.style.display="block";

Drag.tdiv.style.position="absolute";

Drag.tdiv.style.filter="alpha(opacity=70)";

Drag.tdiv.style.cursor="move";

Drag.tdiv.style.border="1px solid #000000";

Drag.tdiv.style.width=Drag.ao.offsetWidth;

Drag.tdiv.style.height=Drag.ao.offsetHeight;

Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;

Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tdiv);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tdiv.style.left;

Drag.lastTop=Drag.tdiv.style.top;

},

draging:function(){//重要:判断MOUSE的位置

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i<parentTable.cells.length;i++){

var parentCell=Drag.getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

parentTable.cells[i].appendChild(Drag.ao);

}

break;

}

for(var j=0;j<subTables.length;j++){

var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

}

}

}

}

,

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tdiv.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

},

getInfo:function(o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

},

repos:function(aa,ab){

var f=Drag.tdiv.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tdiv).left);

var tt=parseInt(Drag.getInfo(Drag.tdiv).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearInterval(Drag.mm);

Drag.tdiv.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tdiv.style.left=parseInt(tl)+"px";

Drag.tdiv.style.top=parseInt(tt)+"px";

Drag.tdiv.filters.alpha.opacity=f;

}

,aa/ab)

},

inint:function(){//初始化

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);

}

}

document.onmousemove=Drag.draging;

document.onmouseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");

str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");

str=str.replace(/\r/g,"<br />\n");

d.write(str);

}

</script>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable">
<tr >
<td width="25%" valgin="top">
<table border=0 class="dragTable" cellspacing="0"> <tr>

<td><b>GMAIL</b></td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Sport</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>News</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

<td width="25%">

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Weather</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Women</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Man</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

<td width="25%">

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Polity</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>My Ajax</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>My Ajax</td>

</tr>

<tr>

<td>
<ul>
<li>·Ajax: A New Approach to Web Applications</li>
<li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

</tr>

</table>
</body>
</html>


搜索更多相关主题的帖子: Google Live Windows 
2006-12-08 16:36
hangxj
Rank: 6Rank: 6
等 级:贵宾
威 望:29
帖 子:2045
专家分:0
注 册:2006-4-10
收藏
得分:0 

请运拷贝到本地进行查看


http://www./
2006-12-08 16:37
快速回复:[转载]仿Google和Windows Live的拖拽
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.038239 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved