javascript - 相对于初始点击拖动元素

Question

我有一个 mousemove 事件，我在 mousedown 事件中添加到元素，然后在 mouseup 事件中删除它。

在 mousemove 事件中，我触发了这个函数，我减去了 X 和 Y 的宽度和高度的一半以使图像居中:

dragImage(e) {
    const width = this.getStyle(e.target, 'width').split('p')[0];
    const height = this.getStyle(e.target, 'height').split('p')[0];
    const X = e.pageX - (window.innerWidth / 2 - window.innerHeight / 2) || e.touches[0].clientX;
    const Y = e.pageY || e.touches[0].clientY;
    const stopTop = Y - (height / 2) > 0;
    const stopBottom = Y + (height / 2) < this.getStyle(e.target.parentNode, 'height').split('p')[0];
    const stopLeft = X - (width / 2) > 0;
    const stopRight = X + (width / 2) < this.getStyle(e.target.parentNode, 'width').split('p')[0];
    const stopTop = Y - (height / 2) > 0;
    const stopBottom = Y + (height / 2) < this.getStyle(e.target.parentNode, 'height').split('p')[0];
    const stopLeft = X - (width / 2) > 0;
    const stopRight = X + (width / 2) < this.getStyle(e.target.parentNode, 'width').split('p')[0];


    // check if element is within vertical bounds
    if (stopTop) {
        this.image.style.bottom = '';
        this.image.style.top = '0px';
    } else if (stopBottom) {
        this.image.style.top = '';
        this.image.style.bottom = '0px';
    } else {
        this.image.style.bottom = '';
        this.image.style.top = `${Y}px`;
    }

    // check if element is within horizontal bounds
    if (stopLeft) {
        this.image.style.right = '';
        this.image.style.left = '0px';
    } else if (stopRight) {
        this.image.style.left = '';
        this.image.style.right = '0px';
    } else {
        this.image.style.right = '';
        this.image.style.left = `${X}px`;
    }

    return false;
}

我已经尝试从 pageX 和 pageY 中减去元素的偏移量并且它到达一半，但是被拖动的元素闪烁，因为每隔一个 X/Y值有偏差，因此值可能是 900、500、900、500 等。

是什么导致了值的变化，我是不是把事情复杂化了？我想要做的就是拖动图像而不将其围绕指针居中，并保持在边界内。

谢谢。

E - 添加更多代码以进行说明:

我在构造函数中添加了第一组 mousedown、mouseup 和 mouseleave 事件:

if (this.isMobile) {
        this.image.addEventListener('touchstart', e => this.enableDrag(e));
        this.image.addEventListener('touchend', e => this.disableDrag(e));
        this.image.addEventListener('touchcancel', () => this.disableDrag());
      } else {
        this.image.addEventListener('mousedown', e => this.enableDrag(e));
        this.image.addEventListener('mouseup', e => this.disableDrag(e));
        this.image.addEventListener('mouseleave', () => this.disableDrag());
        this.image.addEventListener('click', e => e.cancelBubble = true);
      }

这些事件添加和删除了以下函数，该函数启用了拖动:

enableDrag(e) {
      e = e || window.event;
      e.cancelBubble = true;
      e.preventDefault();

      if (this.isMobile) {
        this.image.addEventListener('touchmove', this.dragEvent);
      } else {
        this.image.addEventListener('mousemove', this.dragEvent);
      }
    }

disableDrag() {
      if (this.isMobile) {
        this.image.removeEventListener('touchmove', this.dragEvent);
      } else {
        this.image.removeEventListener('mousemove', this.dragEvent);
      }
    }

Answer 1

基于此:“是什么导致了值的变化，我是不是把事情搞得太复杂了？我想做的就是拖动一个图像，而不是将其围绕指针居中，并保持在边界内。”，我会制作三个建议:

1. 你的边界条件太复杂了，只需设置 top 和 left 属性而忘记 bottom 和 right
2. 基于以上所述，我认为您希望拖动偏离用户启动拖动的位置。在这种情况下，您必须在 mousedown 事件中计算它并在此处使用它。
3. 我已经有一段时间没有编写 JS 代码来操作 DOM，但在过去，getBoundingClientRect是获取 DOM 对象的位置/尺寸的首选方式(而不是直接查询 DOM)

考虑到这一点，您可以这样简化代码:

dragImage(e) {
    var imageBoundaries = this.image.getBoundingClientRect();
    var containerWidth = this.getStyle(e.target.parentNode, 'width').split('p')[0];
    var containerHeight = this.getStyle(e.target.parentNode, 'height').split('p')[0];

    const X = (e.pageX || e.touches[0].clientX) - offsetX; /* where offsetX is defined as where the user initially clicked on the image in the mousedown event */
    const Y = (e.pageY || e.touches[0].clientY) - offsetY; /* ditto */

    if X <= 0 {
        // hit the left boundary
        X = 0
    } else if X + imageBoundaries.width >= containerWidth {
        // hit the right boundary
        X = containerWidth - imageBoundaries.width
    }

    if Y <= 0 {
        // hit the top boundary
        Y = 0
    } else if Y + imageBoundaries.height >= containerHeight {
        // hit the bottom boundary
        Y = containerHeight - imageBoundaries.height
    }


    this.image.style.left = `${X}px`;
    this.image.style.top = `${Y}px`;

    return false;
}

这会将图像限制在窗口的边界(假设您希望始终看到整个图像)。如果您愿意让图像稍微移出视口(viewport)，您可以调整 if 条件。

最后，众所周知，拖放很难正确实现，我通常会求助于第三方来获得此功能。类似于 Dragula很容易设置我见过的最常见的拖放情况。当然，如果这是为了学习，那么是的，自己动手吧:)