可拖拽DIV

最新推荐文章于 2024-04-09 00:58:19 发布

pluton

最新推荐文章于 2024-04-09 00:58:19 发布

阅读量1.7k

点赞数

分类专栏： JavaScript/css 文章标签： div function border table class button

本文链接：https://blog.csdn.net/pluton/article/details/3305500

版权

JavaScript/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>可拖拽DIV</title>
<style>
    .bg{
    height:18px;
    padding:3px;
    background:#147B95;
      FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#147B95,style=1;);
    }
</style>
<script type="text/javascript">
var mpx = 0;
var mpy = 0;
var obj=0;

function show_hide_div()
{

    var theDiv = document.getElementById("mdiv");
    if(theDiv.style.visibility == "hidden")
        theDiv.style.visibility = "visible";
    else
        theDiv.style.visibility = "hidden";

}

function finddiv(ev,mdiv){
obj = mdiv;
x = ev.clientX-parseInt(obj.style.left);
y = ev.clientY-parseInt(obj.style.top);

}

function movediv(ev){
if(obj == 0){
return false;
}
else{

   ev = ev||window.event;
    var mousePos = mouseCoords(ev);
    if(mousePos.y < 10)return ;
    mpx = mousePos.x - x;
    mpy = mousePos.y - y;

    obj.style.left = mpx+"px";
    obj.style.top = mpy+"px";
}
}

function mouseCoords(ev){
if(ev.pageX||ev.pageY){return {x:ev.pageX, y:ev.pageY};}
return {x:ev.clientX + document.documentElement.scrollLeft,y:ev.clientY + document.documentElement.scrollTop}
}

</script>
</head>
<body οnmοusemοve="movediv(event)" οnmοuseup="obj=0">

<div>

<div id="mdiv" style="position:absolute; visibility:hidden;top:178px; left:260px;background:#E9F0F8; border:1px solid #AFB799; font-family:verdana; font-size:12px;color=#111;" >
        <table align="center" width="400" cellpadding="0" cellspacing="0" border="0">
            <tr οnmοusedοwn="finddiv(event,mdiv)" style="cursor:move;z-index:100">
                <td bgcolor="#4574C4" width="282" class="bg">
                    <font> 远方的世界：</font>
                </td>
                <td bgcolor="#4574C4" align="right" class="bg"><img style="cursor:hand;" src="close2.gif" alt="close" οnclick="show_hide_div()" align="center"/> </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table cellpadding="0" cellspacing="0" border="0" style="padding:7px;">
                        <tr valign="top">

                            <td style="height: 150px">
                                1. 殇逝<br/>
                                2. 天堂<br/>
                                3. 远方<br/>
                                4. 黑夜<br/>
                                5. 对错<br/>
                                6. 是非<br/>
                                7. 回头<br/>
                                8. 梦靥<br/>
                            </td>

                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>