在放置容器Chrome，Edge范围内鼠标向上后拖动不起作用

如何解决在放置容器Chrome，Edge范围内鼠标向上后拖动不起作用

当一个元素被拖动并放置在页面的某个位置时，下一个元素应该与第一个元素具有相同的拖动行为。

我决定使用鼠标事件而不是拖放 API 来实现拖动。在拖动过程中，通过按下按钮，被拖动的元素应该是可旋转的，而这对于拖放 API 来说是不可能的。

如果一个元素被拖动到放置容器的socpe并且mouseup事件发生在这个范围内，就会出现问题。当拖动下一个元素时，它不会按预期拖动。出现一个抓取光标而不是鼠标光标，并且元素不跟随光标。（在 Chrome 和 Edge 中，在 Firefox 中一切正常）

如果在放置容器的范围内拖动元素并且 mouseup 事件在范围外触发，则一切都按预期进行。

Here is a link to a gif where you can see the problem.

该问题在 Chrome 和 Edge 中发生，但在 Firefox 中没有。 Chrome/Edge 不支持鼠标事件功能，但在 Firefox 中：“支持 mouseEventInit 可选区域字段”。在 Chrome 中启用“实验性 Web 平台功能”仍然没有解决问题。

检查 Chrome 开发人员工具和 Firefox 开发人员工具中的事件，一个区别是 offsetX 和 offsetY 在 Firefox 中为“0”，但在 Chrome 中分配了一个值。不知道这是否表明存在潜在问题。

如何为 Chrome 和 Edge 也实现正确的拖动行为？

const dragContainer = document.querySelector('#drag-container')
const dropContainer = document.querySelector('#drop-container')
const element1 = document.querySelector('#element-1')
const element2 = document.querySelector('#element-2')

makeElementDraggable(element1)
makeElementDraggable(element2)

function makeElementDraggable(element) {
  element.addEventListener('mousedown',startDrag)
  // Regards to: https://javascript.info/mouse-drag-and-drop
  function startDrag(ev) {
    element.style.position = 'absolute'
    element.style.zIndex = 1000

    document.body.append(element)

    moveAt(ev.pageX,ev.pageY)

    document.addEventListener('mousemove',onMouseMove)
    document.addEventListener('mouseup',reset)
  }

  function onMouseMove(ev) {
    moveAt(ev.pageX,ev.pageY)
  }

  function moveAt(pageX,pageY) {
    element.style.left = pageX + 10 + 'px'
    element.style.top = pageY + 'px'
  }

  function reset() {
    document.removeEventListener('mousemove',onMouseMove)
    element.removeEventListener('mousedown',startDrag)
  }
}

    #drag-container {
      width: 250px;
      height: 500px;
      border: 1px solid black;
    }

    #element-1 {
      background-color: aqua;
      width: 250px;
      height: 50px;
    }

    #element-2 {
      background-color: blueviolet;
      width: 200px;
      height: 50px;
    }

    #drop-container {
      height: 500px;
      width: 500px;
      border: 1px solid black;
    }

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="drag-container">
          <div id="element-1"></div>
          <div id="element-2"></div>
        </div>
        <div id="drop-container"></div>
        <script src="script.js"></script>
      </body>
    </html>

在放置容器Chrome，Edge范围内鼠标向上后拖动不起作用

如何解决在放置容器Chrome，Edge范围内鼠标向上后拖动不起作用

相关推荐