网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

第一天

Ajaap

导航

 
 
 
 
 

日志

 
 
关于我
Ajaap
文章分类

仿造3721、live.com、雅虎拖拽页面代码  

2007-08-21 09:42:11|  分类： JavaScript |  标签： |举报 |字号大中小 订阅

  下载LOFTER 我的照片书  |

<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>

 

  评论这张
 
阅读(191)| 评论(0)

历史上的今天

评论

<#--最新日志，群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易公司版权所有 ©1997-2018