JS+DIV 实现拖动效果

效果图

这里写图片描述

思路

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
    <div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
    <div class="box"></div>
</div>
<script>

    var startx;
    var starty;
    var startLeft;
    var startTop;
    var titleDiv=document.getElementById("title");
    var mainDiv=document.getElementById("main");
    var isDown=false;
//    鼠标按下
    function movedown(e){
        e=e?e:window.event;
        isDown=true;
        startx=e.clientX;
        starty=e.clientY;
        startLeft=parseInt(mainDiv.style.left);
        startTop=parseInt(mainDiv.style.top);
    }
//    鼠标移动
    function move(e){
        e=e?e:window.event;
        if(isDown) {
            mainDiv.style.left = e.clientX - (startx - startLeft)+"px";
            mainDiv.style.top = e.clientY - (starty - startTop)+"px";
        }
    }
//    鼠标松开
    function  moveup(){
        isDown=false;
    }
    titleDiv.onmousedown=movedown;
    titleDiv.onmousemove=move;
    titleDiv.onmouseup=moveup;
</script>
</body>
</html>

优化(封装,以及解决拖动问题(事件捕获))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
    <div id="title"
         style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
    <div class="box"></div>
</div>
<script>


    function Mover(title) {
        this.obj = title;
        this.startx = 0;
        this.starty;
        this.startLeft;
        this.startTop;
        this.mainDiv = title.parentNode;
        var that = this;
        this.isDown = false;
        this.movedown = function (e) {
            e = e ? e : window.event;
            if (!window.captureEvents) {
                this.setCapture();
            }  //事件捕获仅支持ie
//            函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标,
//            所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
//            如果鼠标光标在另一个线程创建的窗口上,只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
//            非ie浏览器 需要在document上设置事件
            that.isDown = true;
            that.startx = e.clientX;
            that.starty = e.clientY;

            that.startLeft = parseInt(that.mainDiv.style.left);
            that.startTop = parseInt(that.mainDiv.style.top);
        }
        this.move = function (e) {
            e = e ? e : window.event;
            if (that.isDown) {
                that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px";
                that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px";
            }
        }
        this.moveup = function () {
            that.isDown = false;
            if (!window.captureEvents) {
                this.releaseCapture();
            } //事件捕获仅支持ie
        }
        this.obj.onmousedown = this.movedown;
        this.obj.onmousemove = this.move;
        this.obj.onmouseup = this.moveup;

        //非ie浏览器
        document.addEventListener("mousemove", this.move, true);
    }
    var mover = new Mover(document.getElementById("title"));


    //写两个是为了解决 ie 和非ie 浏览器关于事件捕获 的兼容性问题


</script>
</body>
</html>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值