Перетаскивание в JavaScript не компенсирует перетаскивание при использовании сенсорного ввода
Я использую функцию перетаскивания HTML5 в проекте. Я пытаюсь изменить положение перетаскиваемого изображения относительно положения ввода (мыши или пальца). Следующий код отлично работает на рабочем столе при использовании мыши, однако при использовании сенсорной панели на экране телефона изображение никогда не смещается.
Первоначально я думал, что это может быть проблема с плотностью пикселей экрана, но даже когда я заменяю смещение гораздо большими числами, ничего не происходит.
function dragStart(ev)
{
console.info("dragging");
console.info(ev);
// Place the drag image offset to the mouse cursor location
ev.dataTransfer.setDragImage(ev.target, 50, 50);
ev.dataTransfer.setData("text", ev.target.dataset.tileIndex);
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Событие перетаскивания — это событие мыши, которое плохо поддерживается на сенсорных устройствах. Следовательно, на многих сенсорных устройствах не только перетаскивание изображения, но и событие перетаскивания даже не работает должным образом. Чтобы обеспечить лучшую поддержку на сенсорных устройствах, вы можете попробовать обрабатывать события касания.
const X_OFFSET = 20;
const Y_OFFSET = 20;
const dragItem = document.getElementById("DragItem");
let imageElement = null;
function dragStart(event) {
if (!event.dataTransfer || !event.target) {
return;
}
// Place the drag image offset to the mouse cursor location
event.dataTransfer.setDragImage(event.target, X_OFFSET, Y_OFFSET);
event.dataTransfer.setData('text/html', event.target);
}
function touchStart(event) {
var touch = event.targetTouches[0];
const image = event.target.cloneNode(true);
image.style.position = 'fixed';
image.style.display = 'none';
document.body.appendChild(image);
imageElement = image;
}
function touchMove(event) {
const touch = event.targetTouches[0];
const left = touch.pageX - X_OFFSET;
const top = touch.pageY - Y_OFFSET;
if (imageElement) {
imageElement.style.left = left + 'px';
imageElement.style.top = top + 'px';
imageElement.style.display = 'block';
}
}
function touchEnd(event) {
if (imageElement) {
document.body.removeChild(imageElement);
imageElement = null;
}
}
dragItem.addEventListener("dragstart", dragStart);
dragItem.addEventListener("touchstart", touchStart);
dragItem.addEventListener("touchmove", touchMove);
dragItem.addEventListener("touchend", touchEnd);<main className = "flex min-h-screen flex-col items-center justify-between p-24">
<div style = "user-select:none; touch-action: none;" id = "DragItem" draggable = "true">
Drag me
</div>
</main>Это не ChatGPT. Я проверил, и это сработало на моей стороне. Вы можете попробовать запустить приведенный выше фрагмент кода. Я уже прикрепил его как что-то работоспособное на Stackoverflow.
СЕЙЧАС тянет...
Большинство браузеров не поддерживают события касания для API перетаскивания или имеют противоречивые реализации. Чтобы обойти эту проблему, вы можете импортировать полифил или создать собственную систему перетаскивания.
Один хороший полифил — Bernardo-Castilho/dragdroptouch. Я проверил, что метод .setDragImage работает для сенсорного взаимодействия в Chrome при использовании этого полифила. Его можно импортировать непосредственно из github, используя:
<script id = "DragDropTouch" src = "https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>
Альтернативно вы можете создать собственную систему перетаскивания. Вот хорошее руководство по созданию системы перетаскивания с поддержкой сенсорного ввода.
Привет! Не могли бы вы предоставить нам еще немного кода (HTML и CSS), чтобы воспроизвести вашу проблему, пожалуйста?