CODEWITHSUNDEEP
javascript
mariocnovoa
mariocnovoa

Reputation: 21

Add Javascript touch events to drag divs

I'm pretty new at using javascript and this is the first time I've posted here, so thanks a lot in advance! I'm using this script to move divs around the screen so that when I click on one, it positions itself first. But I have a problem and that is that it doesn't work on touch screens and I don't know how to make it work.

<script>
window.onload = function() {
  initDragElement();
};

function initDragElement() {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  var popups = document.getElementsByClassName("popup");
  var elmnt = null;
  var currentZIndex = 100; //TODO reset z index when a threshold is passed

  for (var i = 0; i < popups.length; i++) {
    var popup = popups[i];
    var header = getHeader(popup);

    popup.onmousedown = function() {
      this.style.zIndex = "" + ++currentZIndex;
    };

    if (header) {
      header.parentPopup = popup;
      header.onmousedown = dragMouseDown;
    }
  }

  function dragMouseDown(e) {
    elmnt = this.parentPopup;
    elmnt.style.zIndex = "" + ++currentZIndex;

    e = e || window.event;
    // 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) {
    if (!elmnt) {
      return;
    }

    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // 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;
  }

  function getHeader(element) {
    var headerItems = element.getElementsByClassName("popup-header");

    if (headerItems.length === 1) {
      return headerItems[0];
    }

    return null;
  }
}
</script>

Thank you very much!

Upvotes: 2

Views: 76

Answers (1)

Byron
Byron

Reputation: 339

Touch events are different than mouse events because you could have multiple touch points at the same time. (1) There are different listeners, and (2) the structure of the events are different.

(1) Where you set the listeners, you should also set those for touch events, e.g.:

header.onmousedown = dragMouseDown;
header.ontouchstart = dragMouseDown;
...
document.onmouseup = closeDragElement;
document.ontouchend = closeDragElement;
...
document.onmousemove = elementDrag;
document.ontouchmove = elementDrag;

(2) Where you capture the positions you need to handle the different types of events:

if (e.type == 'mousedown') {
    pos3 = e.clientX;
    pos4 = e.clientY;
} else if (e.type == 'touchstart') {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
}
...
if (e.type == 'mousemove') {
    newX = e.clientX;
    newY = e.clientY;
} else if (e.type == 'touchmove') {
    newX = e.touches[0].clientX;
    newY = e.touches[0].clientY;
}
pos1 = pos3 - newX;
pos2 = pos4 - newY;
pos3 = newX;
pos4 = newY;

Upvotes: 1

Related Questions