纯js实现拖拽dom小结

   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);
            };

          };
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容