Перетаскивание HTML5 для перемещения div в любом месте экрана?

Название довольно понятно.

Все демонстрации, которые я нашел, состоят в том, что вы отбрасываете div в определенное место. E.G - мусорный бак. Мне нужно сделать перетаскиваемый div, который можно отбросить в любом месте экрана.

Можно ли это сделать с помощью HTML5? если нет, как мне это сделать?

Ответы

Ответ 1

Это довольно просто:

  • В событии dragstart вычислите смещение между тем, где пользователь нажал на перетаскиваемый элемент и верхний левый угол
  • Убедитесь, что событие dragover применяется ко всему документу, чтобы элемент можно было сбросить в любом месте
  • В событии drop используйте смещение, которое вы рассчитали, с помощью clientX и clientY капли, чтобы определить, где разместить элемент

Здесь один подготовлен ранее. Для бонусных очков вы можете обновить верхнюю и левую позиции элемента в событии dragover, это полезно, если бит, который вы разрешаете перетаскивать, не является весь элемент, который нужно переместить.