CODEWITHSUNDEEP
javascripthtmldrag-and-drop
dever52
dever52

Reputation: 24

Drag and Drop in JS with drag-handle on touch-devices

I'm trying to create a drag-and-drop application using vanilla JS.

Example:  https://codepen.io/dever52/pen/MWrJxrL

However, this only works with a mouse. So i can't drag the element on a touch-device.

I've tried using the ontouchstart and ontouchend event to be able to use it on touch devices, but this doesn't work (see comments in the codepen) as expected. Is there a way how to make this work for touch devices?

Upvotes: 0

Views: 4788

Answers (1)

Or Nakash
Or Nakash

Reputation: 3339

Maybe this answer can help you -> html5 drag and drop FOR MOBILE

Most mobile devices do not listen to the drag events that are bound to the DOM. I would recommend using the touchmove event and the events that go along with with it. It would look something like:

I think these event listeners can help you

  var el = document.getElementById('drag');

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

Upvotes: 0

Related Questions