Bind dragstart and drop events to touch events

Question

Referring to this answer: https://mcmap.net/q/174625/-javascript-drag-and-drop-for-touch-devices-closed

How would I bind the touch events such that they will perform the dragstart and drop events? I've tried binding dragstart to touchdown and drop to touchup but this results in dragstart not picking up on dataTransfer.get/setData.

Is it possible to map the touch events to replicate dragstart and drop?

Lamella

any ideas anyone? – Lorin

Possible solution at: #53531011 – Unduly

Answer 1

1.Touchstart Event: This event will serve as the equivalent of dragstart. It triggers when the user touches the screen.

1. Touchmove Event: This event will simulate dragging behavior. It triggers when the user moves their finger while touching the screen.
2. Touchend Event: This event will serve as the equivalent of drop. It triggers when the user lifts their finger off the screen after dragging.

// Get the element you want to make draggable
var draggableElement = document.getElementById('draggable');

// Add event listeners for touch events
draggableElement.addEventListener('touchstart', handleTouchStart, false);
draggableElement.addEventListener('touchmove', handleTouchMove, false);
draggableElement.addEventListener('touchend', handleTouchEnd, false);

// Variable to store initial touch position
var initialX = null;
var initialY = null;

// Function to handle touchstart event
function handleTouchStart(event) {
    // Store initial touch position
    initialX = event.touches[0].clientX;
    initialY = event.touches[0].clientY;
}

// Function to handle touchmove event
function handleTouchMove(event) {
    if (!initialX || !initialY) {
        return;
    }

    // Calculate the distance moved
    var deltaX = event.touches[0].clientX - initialX;
    var deltaY = event.touches[0].clientY - initialY;

    // Update the element's position
    draggableElement.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
    
    // Prevent scrolling
    event.preventDefault();
}

// Function to handle touchend event
function handleTouchEnd(event) {
    // Reset initial touch position
    initialX = null;
    initialY = null;

    // Perform actions equivalent to drop event
    // For example, you can save the final position or perform any other necessary action
}

Bulbous

Answer 2

Yeah you can map touch events to replicate dragstart and dragstop with touchstart, touchmove and touchend

const draggable = document.querySelector('/*draggable element*/')
const getX = (e) => e.pageX || e.touches[0].pageX;
let isDragging,
    offsetX,
    offsetY = false;
    
const dragStart = (e) => {
    e.preventDefault();
    isDragging = true;
    
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    offsetX = clientX - draggable.offsetLeft;
    offsetY = clientY - draggable.offsetTop;
};
    
const dragging = (e) => {
    if (!isDragging) return;
    e.preventDefault();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    draggable.style.left = `${clientX - offsetX}px`;
    draggable.style.top = `${clientY - offsetY}px`;
};

const dragStop = () => {
    isDragging = false;
};

//function calls

Decane

Answer 3

I would recommend using this https://github.com/bevacqua/dragula. Prety easy to integrate.

Bugaboo