Блог

Главная - Вопросы по программированию - Перетаскивание не работает после наведения курсора мыши в области контейнера для перетаскивания (Chrome, Edge)

Перетаскивание не работает после наведения курсора мыши в области контейнера для перетаскивания (Chrome, Edge)

#javascript #html #css #mouseevent #drag

Вопрос:

Когда элемент перетаскивается и помещается где-то на странице, следующий элемент должен иметь такое же поведение перетаскивания, как и первый элемент.

Я решил реализовать перетаскивание с помощью mouseevents вместо API перетаскивания. Перетаскиваемый элемент должен вращаться во время процесса перетаскивания нажатием кнопки, а это невозможно с помощью API перетаскивания.

Проблема возникает, если элемент перетаскивается в socpe контейнера для перетаскивания, и в этой области происходит событие mouseup. Когда перетаскивается следующий элемент, он перетаскивается не так, как ожидалось. Вместо курсора мыши появляется курсор захвата, и элемент не следует за курсором. (В Chrome и Edge, в Firefox все в порядке)

Все работает так, как ожидалось, если элемент перетаскивается за пределы области контейнера, и событие mouseup запускается за пределами области.

Вот ссылка на gif, где вы можете увидеть проблему.

Проблема возникает в Chrome и Edge, но не в Firefox. Существует функция mouseevent, не поддерживаемая в Chrome/Edge, но в Firefox: «Поддержка mouseEventInit необязательное поле региона». Включение «Экспериментальных функций веб-платформы» в Chrome по-прежнему не решало проблему.

Проверка событий в инструментах разработчика 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>

Комментарии:

1. У вас есть пример replit или jsfiddle?

2. ДА: replit.com/@dave88/Dragging-ships#script.js

3. Я думаю, что в вашем примере чего-то не хватает, потому что элементы удаляются при перетаскивании мыши вверх

4. Теперь я отредактировал код, чтобы элементы больше не удалялись. Тем не менее, это не такое поведение при отбрасывании, как в моем исходном коде. Я попытался воспроизвести проблему с наименьшим возможным количеством кода.

Метки: ,