美文网首页
纯js实现拖拽dom小结

纯js实现拖拽dom小结

作者: Roct | 来源:发表于2023-12-24 16:21 被阅读0次
   if (element) {
          element.onmousedown = function (ev: any) {
            ev.stopPropagation()
            element.style.transition =
                'hover cubic-bezier(0.25, 0.1, 0.25, 1) 0.64s';
            const disX = ev.clientX;
            const disY = ev.clientY;
            const ex = disX - element.offsetLeft;
            const ey = disY - element.offsetTop;
            // document添加鼠标移动
            document.onmousemove = function (ev) {
              const w1 = ev.clientX;
              const y1 = ev.clientY;

              element.style.left = w1 - ex + 'px';
              element.style.top = y1 - ey + 'px'
            };
            // document添加鼠标浮起事件
            document.onmouseup = (e: any) => {
              ev.stopPropagation()
              setTimeout(() => {
                const x = e.clientX;
                const y = e.clientY;
                document.onmousemove = null;
                document.onmouseup = null;

              }, 100);
            };

          };
        }

相关文章

  • 纯js实现拖拽功能

    好的,这次来看看用纯js如何实现拖拽运动。源码已上传到github,需要的可以下载 https://github...

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • 原生js实现拖拽(碰撞检测)

    js实现拖拽

  • 拖拽

    一、JS拖拽JS里拖拽三事件, onmousedown onmousemove onmouseup 是实现交互性效...

  • js拖拽html元素工具类

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

  • js实现拖拽

    ①鼠标按下+鼠标移动 → 拖拽②鼠标松开 → 无拖拽③鼠标偏移 → 拖拽距离 js实现 ① onmousedown...

  • 纯 js 实现上传文件支持拖拽

    开发「bufpay.com 个人即时到账收款平台」后台需要支持开发者的微信和支付宝二维码上传。 原来的方式是点击 ...

  • 实现拖拽

    原生js实现 HTML5原生实现:拖拽draggable属性、DataTranfers对象

  • 2.JavaScript优化-DOM

    DOM优化 一、DOM与JavaScript 浏览器会把DOM与js独立实现-像两个独立的小岛 js操作dom-从...

  • JS实现拖拽

网友评论

      本文标题:纯js实现拖拽dom小结

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