使用mousedown、mousemove、mouseup實(shí)現(xiàn)拖拽效果

周國(guó)輝發(fā)布于2019-08-26 11:34 / 1852人閱讀

摘要：如何實(shí)現(xiàn)一個(gè)元素的拖拽效果，使用原生的實(shí)現(xiàn)，習(xí)慣了的同學(xué)們，你們自己寫了嗎久使用框架，不寫的東西，感覺(jué)自己完全不會(huì)了。話不多說(shuō)，直接上。本例子以簡(jiǎn)單的為例子。我是一個(gè)可以退拽的

如何實(shí)現(xiàn)一個(gè)元素的拖拽效果，使用原生的js實(shí)現(xiàn)，習(xí)慣了jquery的同學(xué)們，你們自己寫了嗎？N久使用mvvm框架，不寫jquery的東西，感覺(jué)自己完全不會(huì)了。

話不多說(shuō)，直接上code。本例子以簡(jiǎn)單的div為例子。

html

我是一個(gè)可以退拽的div

css

div {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #999;
  padding: 10px;
  cursor: pointer;
}

javascript

window.onload = funtion() {
  const div = document.getElementById("div");
  let initPosition = {};


  div.addEventListener("mousedown", onMousedown);
  
  function onMousedown(event) {
    
    const { pageX, pageY } = event;
    initPosition = getPosition();

    document.addEventListener("mousemove", omMousemove);
    document.addEventListener("mouseup", onMouseUp);

  }

  function omMousemove(event) {
    const { pageX, pageY } = event;
    const { left, top} = calcPosition(pageX, pageY);

    div.style.cssText = `left:${left}px;top:${top}px;`;

  }

  function onMouseUp(event) {
    document.removeEventListener("mousemove", onMouseMove);
  }


  function calcPosition(pageX, pageY) {

    const { left, top, scrollLeft, maxCriticalX, maxCriticalY } = initPosition;

    let x = pageX - left;
    let y = pageY - top;

    if (x <= scrollLeft) {
      x = scrollLeft;
    }

    if (x >= maxCriticalX) {
      x = maxCriticalX;
    }

    if (y >= maxCriticalY) {
      y = maxCriticalY;
    }

    if ( y<=0 || maxCriticalY < 0) {
      y = 0;
    }

    return {
      left: x,
      top: y
    };
  }



  function getPosition() {
    const { left, top, width, height } = div.getBoundingClientRect();
    const { scrollLeft, scrollTop } = document.body;

    const maxCriticalX = scrollLeft + innerWidth - width;
    const maxCriticalY = scrollTop + innerHeight - height;

    return {
        left,
        top,
        scrollLeft,
        maxCriticalX,
        maxCriticalY
    };
  }
};