JavaScript Drag and Drop for Touch Devices

Javascript Drag and drop for touch devices

You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need, the library I recommend is https://github.com/furf/jquery-ui-touch-punch, with this your drag and drop from Jquery UI should work on touch devises

or you can use this code which I am using, it also converts mouse events into touch and it works like magic.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

And in your document.ready just call the init() function

code found from Here

drag-and-drop on touchscreen

You can determine coordinates by measuring device width/height (window.innerHeight/window.innerWidth).

This article is a good starting point for touch events and overriding them:
http://www.html5rocks.com/en/mobile/touch/

Multi-touch gestures shouldn't interfere with the draggable elements. You can use conditionals in your event handlers if they are interfering:
(event handler)
if (event.touches === 1) handle the event

Not able to detect touch drag and touch drop events

You were probably using the querySelectorAll wrong. Check this code.

But there is an another bug, it seems that you can drop the buttons on top of each other and they kind of merge which also produces error. That is probably not what you want :)

var orderNos = [];

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  console.log("event.target.id", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  console.log("event.target.id", event.target.id);
  orderNos.push(data);
  console.log("drp", orderNos);
}
// var draggable = document.getElementById("1Mis");
var draggables = document.querySelectorAll(".gradient-button-4");

draggables.forEach((draggable) => {
  wrapper = document.getElementById("dropBox");
  /* the drag function */
  draggable.addEventListener(
    "touchmove",
    function(event) {
      // make the element draggable by giving it an absolute position and modifying the x and y coordinates
      draggable.className = draggable.className + " absolute";
      // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
      wrapper.appendChild(draggable);
      var touch = event.targetTouches[0];
      // Place element where the finger is
      draggable.style.left = touch.pageX - 25 + "px";
      draggable.style.top = touch.pageY - 25 + "px";
      event.preventDefault();
    },
    false
  );
});

draggables.forEach((draggable) => {
  draggable.addEventListener("touchend", function(event) {
    // hide the draggable element, or the elementFromPoint won't find what's underneath
    draggable.style.left = "-1000px";
    draggable.style.top = "-1000px";
    // find the element on the last draggable position
    var endTarget = document.elementFromPoint(
      event.changedTouches[0].pageX,
      event.changedTouches[0].pageY
    );
    // position it relative again and remove the inline styles that aren't needed anymore
    removeClass(draggable, "absolute");
    draggable.removeAttribute("style");
    // put the draggable into it's new home
    if (endTarget !== "undefined") {
      endTarget.appendChild(draggable);
    }
  });
});

// wrapper = document.getElementById('dropBox');
// /* the drag function */
// draggable.addEventListener('touchmove', function(event) {
//   // make the element draggable by giving it an absolute position and modifying the x and y coordinates
//   draggable.className = draggable.className + " absolute";
//   // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
//   wrapper.appendChild(draggable);
//   var touch = event.targetTouches[0];
//   // Place element where the finger is
//   draggable.style.left = touch.pageX - 25 + 'px';
//   draggable.style.top = touch.pageY - 25 + 'px';
//   event.preventDefault();
// }, false);

/* the drop function */
// draggable.addEventListener('touchend', function(event) {
//   // hide the draggable element, or the elementFromPoint won't find what's underneath
//   draggable.style.left = '-1000px';
//   draggable.style.top = '-1000px';
//   // find the element on the last draggable position
//   var endTarget = document.elementFromPoint(
//     event.changedTouches[0].pageX,
//     event.changedTouches[0].pageY
//   );
//   // position it relative again and remove the inline styles that aren't needed anymore
//   removeClass(draggable, 'absolute');
//   draggable.removeAttribute('style');
//   // put the draggable into it's new home
//   if (endTarget !== 'undefined') {
//     endTarget.appendChild(draggable);
//   }
// });

// just a little helper function
function removeClass(e, c) {
  e.className = e.className.replace(
    new RegExp("(?:^|\\s)" + c + "(?!\\S)"),
    ""
  );
}

<div class="droptarget" style="border-color:#DE4031;" ondrop="drop(event)">
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="1Mis">Miscommunication & Misinterpretation  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="2Com">Communication Delays </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="3Sca">Scattered Work and Content  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="4Sha">Sharing Work with Others  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="5Get">Getting Feedback and Ideas  </button>
  <input type="text" class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" placeholder="Any Other?" id="6anyOther" />

</div>
<div class="droptarget" id="dropBox" style="border-color:#31CFDE" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

---

Related Topics