拖拽对话框案例

最新推荐文章于 2024-07-18 13:52:01 发布

a63438840

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量83

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shanlu0000/p/11247239.html

版权

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #demo{
            width:500px;
            height:400px;
            border:1px solid black;
            position:absolute;
            top:100px;
            left:100px;
        }
        #demo #shang{
            width:100%;
            height:50px;
            background-color: gray;
            font-size:18px;
            line-height:50px;
            position:absolute;
            top:0;
            left:0;
            cursor:move;
        }
        #demo #shang .zcxx{
            float:left;
        }
        #demo #shang .gb{
            float:right;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="shang">
            <span class="zcxx">注册信息(可以拖拽)</span>
            <span class="gb">[关闭]</span>
        </div>
    </div>
</body>
</html>
<script>
    var demo=document.getElementById("demo");
    var shang=document.getElementById("shang");
    tuozhuai(shang,demo);
    function tuozhuai(current,move) //current是鼠标按下的地方(shang),move是会移动的地方(demo)
    {
        current.οnmοusedοwn=function (event) {
            var event=event||window.event;
            var x=event.clientX-move.offsetLeft;//当前盒子(shang）的横坐标
            var y=event.clientY-move.offsetTop; //当前盒子的纵坐标

            document.οnmοusemοve=function (event) {
                var event=event||window.event;
                move.style.left=event.clientX-x+"px"; //
                move.style.top=event.clientY-y+"px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
        document.οnmοuseup=function () {
            document.οnmοusemοve=null;
        }
    }
</script>

转载于:https://www.cnblogs.com/shanlu0000/p/11247239.html

a63438840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽对话框案例

<!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" xml:lang=...
复制链接

扫一扫