美文网首页
JS拖拽div

JS拖拽div

作者: MiSiTeWang | 来源:发表于2021-05-24 13:49 被阅读0次
//获取元素
    var dv = document.getElementById('dv');
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;
    //鼠标按下事件
    dv.onmousedown = function (e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;

        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
    }
    //鼠标移动
    window.onmousemove = function (e) {
        if (isDown == false) {
            return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);

        dv.style.left = nl + 'px';
        dv.style.top = nt + 'px';
    }
    //鼠标抬起事件
    dv.onmouseup = function () {
        //开关关闭
        isDown = false;
        dv.style.cursor = 'default';
    }

相关文章

  • js 拖拽 DIV

  • JS拖拽div

  • 事件应用

    拖拽 拖拽原理 三大事件 -鼠标和Div的相对距离不变 把拖拽加到document上 如果拖得太快,会移出div,...

  • 事件应用

    拖拽 拖拽原理 三大事件 -鼠标和Div的相对距离不变 把拖拽加到document上 如果拖得太快,会移出div,...

  • div 拖拽

    /* 图标功能加载*/pageCommon.nav = function () {var posX;var pos...

  • 拖拽div的值到table

    Html 代码 jQeruyUI拖拽效果_拖拽div的值到table表格...

  • 元素拖拽排序

    产品有个需求,需要将DIV拖拽排序凭着JS插件无所不包的信念很快就找到了 https://github.com/S...

  • 可拖拽div

    一个在移动端及PC端都可以使用的拖拽函数。 使用方法 需要先设置position属性,absolute relat...

  • 可拖拽div

  • js拖拽html元素工具类

    复制就能用的拖拽js方法 原生js实现拖拽元素方法 使用(注意拖拽目标元素需绝对定位 position: 'abs...

网友评论

      本文标题:JS拖拽div

      本文链接:https://www.haomeiwen.com/subject/ovjxsltx.html