js 拖拽drag

最新推荐文章于 2025-01-14 00:01:52 发布

pingmin_1001

最新推荐文章于 2025-01-14 00:01:52 发布

阅读量164

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/pinhmin/article/details/131402878

版权

这段代码定义了一个名为kefuDrag的函数，用于处理聊天窗口（#kefuEnterLink）在页面上的拖动。它支持触摸和鼠标事件，根据窗口大小和内容区域限制窗口的拖动范围。在窗口大小改变时，会自动调整窗口位置。拖动过程中，窗口始终保持在主要内容区域内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function kefuDrag() {
    var kefuEnterLink = document.querySelector('#kefuEnterLink');
    var winWd = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var bodyWd = document.body.clientWidth;
    var maxW = bodyWd - kefuEnterLink.offsetWidth;
    var maxH = document.body.clientHeight - kefuEnterLink.offsetHeight;
    var oL = 0, oT = 0, oLeft = 0, oTop = 0;
    var isTouch = typeof window.ontouchstart !== 'undefined';
    var disWd = 0;
    /**移动端拖拽控制再主体内容范围内*/
    disWd = (winWd - bodyWd) / 2;
    if (disWd <= 0) {
      disWd = 0;
    };
    var dragging = false;
    var kefuEventObj = {
      start: 'touchstart',
      move: 'touchmove',
      end: 'touchend'
    };
    if (!isTouch) {
      kefuEventObj = {
        start: 'mousedown',
        move: 'mousemove',
        end: 'mouseup'
      }
    }
    var isDragFlag = false;
    kefuEnterLink.addEventListener(kefuEventObj.start, function (e) {
      var ev = e || window.event;
      dragging = true;
      if (isTouch) {
        var touch = ev.targetTouches[0];
        oL = touch.clientX - kefuEnterLink.offsetLeft;
        oT = touch.clientY - kefuEnterLink.offsetTop;
      } else {
        oL = ev.clientX - kefuEnterLink.offsetLeft;
        oT = ev.clientY - kefuEnterLink.offsetTop;
      };
      document.addEventListener(kefuEventObj.move, move, false);
      document.addEventListener(kefuEventObj.end, function (e) {
        dragging = false;
        document.removeEventListener(kefuEventObj.move, move, false);
      });
      return false;
    });
    function move(e) {
      var ev = e || window.event;
      ev.preventDefault();
      if (dragging) {
        if (isTouch) {
          var touch = ev.targetTouches[0];
          oLeft = touch.clientX - oL;
          oTop = touch.clientY - oT;
        } else {
          oLeft = ev.clientX - oL;
          oTop = ev.clientY - oT;
        };
        setkefuEnterCss();
        isDragFlag = true;
      }
    }
    $(window).resize(function () {
      setTimeout(function () {
        winWd = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        bodyWd = document.body.clientWidth;
        maxW = bodyWd - kefuEnterLink.offsetWidth;
        maxH = document.body.clientHeight - kefuEnterLink.offsetHeight;
        disWd = (winWd - bodyWd) / 2;
        if (disWd <= 0) {
          disWd = 0;
        };
        if (isDragFlag) {
          setkefuEnterCss();
        }
      }, 200);
    });
    function setkefuEnterCss() {
      if (disWd) {
        if (oLeft < disWd) {
          oLeft = disWd;
        } else if (oLeft >= maxW + disWd) {
          oLeft = maxW + disWd;
        };
      } else {
        if (oLeft < 0) {
          oLeft = 0;
        } else if (oLeft >= maxW) {
          oLeft = maxW;
        };
      }

      if (oTop < 10) {
        oTop = 10;
      } else if (oTop >= maxH) {
        oTop = maxH;
      };
      kefuEnterLink.style.left = oLeft + 'px';
      kefuEnterLink.style.marginLeft = 0 + 'px';
      kefuEnterLink.style.bottom = 'auto';
      kefuEnterLink.style.top = oTop + 'px';
    }
  };