可拖动div

来源：互联网发布：PHP取两位小数函数编辑：程序博客网时间：2024/05/12 00:10
<!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