短视频程序源码，实现选中可拖拽功能

原创

yunbaokeji柯基

修改于 2020-09-27 17:46:59

4920

修改于 2020-09-27 17:46:59


在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div{width: 100px;height: 100px;border-radius: 50px;background: red;position: absolute;}</style>
</head>
<body>
    <div></div>
    <script>
        var oDiv = document.querySelector("div");//首先获取要拖拽的div
        //获取当前可视界面的宽高
        var cw =document.documentElement.clientWidth;
        var ch =document.documentElement.clientHeight;
        //获取div的宽高
        var dt =oDiv.clientWidth;
        var dh =oDiv.clientHeight;
        //添加鼠标落下事件
        oDiv.onmousedown = function(e){
            var evt = e||event;
            //获取事件对象距离事件源的距离
            var x = evt.offsetX;
            var y = evt.offsetY;
            //验证
            console.log(x);
            console.log(y);
            //添加鼠标移动事件
            document.onmousemove =function(e){
                var evt = e||event;
    //算出div移动时距离可视界面的事实距离
                var i=evt.clientX-x;
                var j=evt.clientY-y;
    //限制出界
                i=i<=0?0:i>=cw-dt?cw-dt:i;
                j=j<=0?0:j>=ch-dh?ct-dh:j;
    //
                oDiv.style.left = i+"px";
                oDiv.style.top =j+"px";
            }
            //
            document.οnmοuseup=function(){
  //清除
                document.οnmοusemοve=null;
            }
        }
    </script>
</body>
</html>
# 标题

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

互动直播