纯js实现拖拽dom小结

29 阅读1分钟
   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);
            };

          };
        }