Javascript 元素翻译和生命周期

我正在做一个 js 任务，下面 fiddle 中提到的目标是拖动主 div，显示 div 何时居中并将其转换到它的起始位置。

目标: 释放“.draggable”后，它应该动画回到原来的位置。

目前我一直在翻译 div 并理解为什么流程只工作一次然后“卡住”并且不删除监听器。

我很想澄清一下我应该如何处理翻译部分，以及只要客户端运行就可以复制此行为。

<html>

  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      .draggable {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 150px;
        height: 150px;
        cursor: grab;
      }

      .draggable-inner {
        width: 100%;
        height: 50%;
      }

      .draggable-inner.top {
        background: #1ADECB;
      }

      .draggable-inner.bottom {
        background: #1A8FDE;
      }

      .draggable.animate {
        transition: 500ms transform ease;
      }

      .markers {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }

      .marker {
        background: yellow;
        opacity: 0.2;
        transition: 500ms opacity ease;
        position: absolute;
      }

      .marker.visible {
        background: #1ADE91;
        opacity: 1;
      }

      .center-x-marker {
        width: 10px;
        height: 100%;
      }

      .center-y-marker {
        width: 100%;
        height: 10px;
      }

    </style>
  </head>

  <body>
    <div class="draggable">
      <div class="draggable-inner top"></div>
      <div class="draggable-inner bottom"></div>
    </div>
    <div class="markers">
      <div class="marker center-x-marker"></div>
      <div class="marker center-y-marker"></div>
    </div>
    <script>
      let isDragging = false;

      const deltaToCenter = {
        x: 0,
        y: 0
      };
      const dragPosition = {
        x: 0,
        y: 0
      };
      const screenCenterPosition = {
        x: 0,
        y: 0
      };

      const draggable = document.querySelector('.draggable');
      const markerX = document.querySelector('.center-x-marker');
      const markerY = document.querySelector('.center-y-marker');

      let {
        width,
        height
      } = draggable.getBoundingClientRect();
      const draggableCenter = {
        x: width / 2,
        y: height / 2
      };

      draggable.addEventListener('mousedown', initDrag);

      function onTransitionEnd() {
        draggable.classList.remove('animate');
        hideMarkers();
      }

      function hideMarkers() {
        markerX.classList.remove('visible');
        markerY.classList.remove('visible');
      }

      function handleDrag(event) {
        isDragging = true;

        let pX = event.pageX;
        let pY = event.pageY;
        draggable.style.left = pX + "px";
        draggable.style.top = pY + "px";

        let dragObj = draggable.getBoundingClientRect();
        
        
        if (dragObj.top === 145 && dragObj.bottom === 295){
            markerX.classList.add('visible');
            markerY.classList.add('visible');
        }
      }

      function stopDrag() {
        isDragging = false;
        var bodyRect = document.body.getBoundingClientRect(),
          elemRect = draggable.getBoundingClientRect();

        draggable.classList.add('animate');
        document.removeEventListener('mousemove', handleDrag);
        draggable.addEventListener('webkitTransitionEnd', onTransitionEnd);
        draggable.addEventListener('transitionend', onTransitionEnd);
        draggable.style.transform = (`translate(0px, 0px)`);
      }

      function initDrag(event) {
        isDragging = true;
        dragPosition.x = event.pageX;
        dragPosition.y = event.pageY;

        screenCenterPosition.x = parseInt(document.body.offsetWidth / 2);
        screenCenterPosition.y = parseInt(document.body.offsetHeight / 2);

        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('mousemove', handleDrag);
      }

    </script>
  </body>

</html>

最佳答案

你的主要问题是你试图用变换重置左上角。

// use left and top:

draggable.style.left = pX + "px";
draggable.style.top = pY + "px";
  // reset:
draggable.style.left = 0 + "px";
draggable.style.top= 0 + "px";

// or use transform:

draggable.style.transform = "translate("+pX+"px, "+pY+"px)";
  // reset:
draggable.style.transform = "translate(0px, 0px)";

我还把你的事件监听器从你的函数中移除了，因为你真的不需要移除它们。

let isDragging = false;

const deltaToCenter = {
  x: 0,
  y: 0
};
const dragPosition = {
  x: 0,
  y: 0
};
const screenCenterPosition = {
  x: 0,
  y: 0
};

const draggable = document.querySelector('.draggable');
const markerX = document.querySelector('.center-x-marker');
const markerY = document.querySelector('.center-y-marker');

let {
  width,
  height
} = draggable.getBoundingClientRect();
const draggableCenter = {
  x: width / 2,
  y: height / 2
};

draggable.addEventListener('mousedown', initDrag);
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', stopDrag);
draggable.addEventListener('transitionend', onTransitionEnd);

function initDrag(event) {
  isDragging = true;
  dragPosition.x = event.pageX;
  dragPosition.y = event.pageY;
  screenCenterPosition.x = parseInt(document.body.offsetWidth / 2);
  screenCenterPosition.y = parseInt(document.body.offsetHeight / 2);
}

function handleDrag(event) {
  if (isDragging) {
    let pX = event.pageX;
    let pY = event.pageY;
    draggable.style.transform = 'translate('+pX+'px, '+pY+'px)';
    let dragObj = draggable.getBoundingClientRect();
    if (dragObj.top === 145 && dragObj.bottom === 295) {
      markerX.classList.add('visible');
      markerY.classList.add('visible');
    }
  }
}

function stopDrag() {
  isDragging = false;
  draggable.classList.add('animate');
  draggable.style.transform = 'translate(0px, 0px)';
}

function onTransitionEnd() {
  draggable.classList.remove('animate');
  hideMarkers();
}

function hideMarkers() {
  markerX.classList.remove('visible');
  markerY.classList.remove('visible');
}

draggable.addEventListener('mousedown', initDrag);
draggable.addEventListener('transitionend', onTransitionEnd);
document.addEventListener('mouseup', stopDrag);
document.addEventListener('mousemove', handleDrag);

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.draggable {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 150px;
  height: 150px;
  cursor: grab;
}

.draggable-inner {
  width: 100%;
  height: 50%;
}

.draggable-inner.top {
  background: #1ADECB;
}

.draggable-inner.bottom {
  background: #1A8FDE;
}

.draggable.animate {
  transition: 500ms transform ease;
}

.markers {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.marker {
  background: yellow;
  opacity: 0.2;
  transition: 500ms opacity ease;
  position: absolute;
}

.marker.visible {
  background: #1ADE91;
  opacity: 1;
}

.center-x-marker {
  width: 10px;
  height: 100%;
}

.center-y-marker {
  width: 100%;
  height: 10px;
}

<div class="draggable">
  <div class="draggable-inner top"></div>
  <div class="draggable-inner bottom"></div>
</div>
<div class="markers">
  <div class="marker center-x-marker"></div>
  <div class="marker center-y-marker"></div>
</div>

关于Javascript 元素翻译和生命周期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59470418/

Javascript 元素翻译和生命周期

上一篇：javascript - for循环-计数，等待计数器，继续计数

下一篇：javascript - 在 state 中更新数组的状态