CODEWITHSUNDEEP
javascripthtmlcss
Saeid Eisakhani
Saeid Eisakhani

Reputation: 51

Draggable Element does not work on Touch Screen

I have a draggable div that works in computer very well but today I checked in touch screen and knew that it does not move.
The JavaScript code I have uses onmousemove, is there any alternative for that on touchscreen?
What to do to solve this? BTW, I'd like this to work on both touch screen and desktop devices.

Currently what I have:

dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    let parentElement = elmnt.parentElement;
    if (elmnt.offsetTop < 0) {
      elmnt.style.top = "0px";
      return;
    }
    if (elmnt.offsetTop > (parentElement.offsetHeight - elmnt.offsetHeight) - 2) {
      elmnt.style.top = (parentElement.offsetHeight - elmnt.offsetHeight - 2) + "px";
      return;
    }
    if (elmnt.offsetLeft < 0) {
      elmnt.style.left = "0px";
      return
    }
    if (elmnt.offsetLeft > (parentElement.offsetWidth - elmnt.offsetWidth) - 2) {
      elmnt.style.left = (parentElement.offsetWidth - elmnt.offsetWidth - 2) + "px";
      return;
    }

    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
<div id="wrapper" style="border: 0.1vw solid gray;">
  <div id="mydiv">
    <img src="https://placekitten.com/200/287">
  </div>
</div>

Upvotes: 0

Views: 4865

Answers (1)

limzikiki
limzikiki

Reputation: 21

For mobile phones instead of mouse events, you should use touch events.

That means that instead of onmousemove you should use ontouchmove and ontouchstart, ontouchstart accordingly. Touch events don't have direct access to clientX and clientY properties, you can retrieve them only from Touch that is retrievable from the list TouchesEvent.touches. This list contains the number of touches to the screen that were happening when a listener was invoked.

Also, I would recommend adding listeners instead of assigning handlers, because they are considered experimental for touch events.

Here is more detailed information on how to use Touch Events.

Upvotes: 1

Related Questions