可拖动div

最新推荐文章于 2024-06-08 14:43:17 发布

----面具----

最新推荐文章于 2024-06-08 14:43:17 发布

阅读量204

点赞数

分类专栏： html5 文章标签： html5

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <style>
        *{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #move {
            width: auto;
            position: absolute; /*浮动*/
            box-shadow: 0px 1px 5px #888888;
            background-color: #ffffff;
            border: 1px groove rgb(0, 0, 0);
        }

        #move > .titleBar {
            background-color: aqua;
            margin: 0;
            border: 1px groove rgb(0, 0, 0);
            height:18px
        }
    </style>
    <script>
    //div的移动事件
    var divMove = {
        o: null,
        Lastobj: null,
        init: function (obj) {
            obj.onmousedown = this.start;
        },
        start: function (e) {
            var o;
            divMove.o = o = e.target.parentNode;
            if (divMove.Lastobj != null) {
                divMove.Lastobj.style.zIndex = 1;
            }
            o.style.zIndex = 50;
            o.x = e.clientX - o.offsetLeft;
            o.y = e.clientY - o.offsetTop;
            document.onmousemove = divMove.move;
            document.onmouseup = divMove.end;
        },
        move: function (e) {
            var objX, objY;
            objX = e.clientX - divMove.o.x;
            objY = e.clientY - divMove.o.y;
            divMove.o.style.left = objX + 'px';
            divMove.o.style.top = objY + 'px';
        },
        end: function () {
            divMove.Lastobj = divMove.o;
            divMove.o = document.onmousemove = document.onmouseup = null;
        }
    }
    </script>
</head>
<body>
    <div id="move">
        <div class="titleBar" onmouseover="divMove.init(this)">视频</div>
        <video id="myVideo" controls="controls">
            <source id="vid_src" src="#" type="video/webm" />
            <track id="vtt_src" src="#" kind="subtitles" srclang="zh" label="Chinese" default>
        </video>
    </div>

</body>

----面具----

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可拖动div

<!DOCTYPE html><head> <style> *{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
复制链接

扫一扫