仿Google和Windows Live的拖拽

ttx9n · 发表于 2006-11-13 00:00:00

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

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

kwzc65wdj · 发表于 2022-8-30 23:24:08

谢谢小Y分享

lsc54 · 发表于 2022-9-14 07:30:28

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

9jduu05 · 发表于 2022-10-10 10:22:46

哦哦哦哦哦哦哦哦哦

bp5jgbcnt · 发表于 2022-12-29 05:24:52

看看看咋么

5cf304mn2 · 发表于 2023-1-13 12:33:01

。。。。。。。。。。。。。。。

81708585 · 发表于 2023-1-18 01:16:48

的谁vdvdsvdsvdsdsv

小伙伴 · 发表于 2023-10-25 00:51:26

加快速度很快就撒谎

gc4hg · 发表于 2024-4-10 05:15:14

哦哦哦ijhhsdj

feiyasqhr · 发表于 2024-4-19 03:48:17

dfdsafdsfdsfdsf

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 仿Google和Windows Live的拖拽

相关帖子