Коснитесь с помощью перетаскивания HTML5

Question

Я создаю сенсорную интерактивную консоль для Windows для небольшого благотворительного музея.Интерактив будет основан на Chrome в режиме киоска.

Часть интерактива - это викторина, в которой представлены некоторые перетаскиваемые и перетаскиваемые элементы HTML

Моя проблема в том, что хотя страница отлично работает с помощью мыши, функция перетаскивания не работает наWindows-сенсорный экран.

Мне удалось вот-вот заставить работать с помощью перетаскивания, используя советы отсюда, однако это приводит к тому, что другие элементы страницы не работают.Например, в рабочем javascript я не допускаю, чтобы в один и тот же div было добавлено более одного элемента, поворачиваю некоторые индикаторы div в красный или зеленый цвет в зависимости от правильности ответа, а также отображаю кнопку для перехода к следующему вопросу, если три ответа имеютбыло сделано.Эта версия также позволяет удалять элементы div на любом элементе div на странице, а не только на элементы dropable.

Я также пробовал jQuery UI Touch Punch, который, как я понял, просто конвертирует прикосновения в жесты мыши, но ничего не делает.

На странице используется jQuery - v1.7.2 и jQuery UI - v1.8.21

ПОМОГИТЕ, пожалуйста, у меня заканчиваются идеи.Это нужно только для работы в Chrome на ПК.

HTML это:

<!--Three dragable boxes with text label-->
  <div class="cubeContainer" style="width: 1000px; height: 66px; position: absolute;left: 231px; top:500px;">

    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" data-size="1">
      <div id="div7" draggable="true" ondragstart="drag(event)" data-div="div1">
      Question 1
      </div>
    </div>

    <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" data-size="1">
      <div id="div8" draggable="true" ondragstart="drag(event)" data-div="div2">
      Question 2     
      </div>
    </div>

    <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" data-size="1">
      <div id="div9" draggable="true" ondragstart="drag(event)" data-div="div3">
      Question 3
      </div>
    </div>
  </div>

Мой текущий Javascript (сенсорный не работает):

function allowDrop(ev)
{
  ev.preventDefault();
}
function drag(ev)
{
  ev.dataTransfer.setData("content",ev.target.id);

}

function drop(ev)

{ev.preventDefault();

    if (ev.target.tagName=="IMG") { return; }

  var maxLength = Number(ev.target.getAttribute('data-size'));
  var image =ev.dataTransfer.getData("content");

  if (ev.target.children.length >= maxLength) {
        return;
    }  

  //red and green indicators
  if (ev.target.id == document.getElementById(image).getAttribute('data-div')){ 
      document.getElementById(image + "results").style.backgroundColor='green';  
      this[image] = 1;
      ev.target.appendChild(document.getElementById(image));
    }
  else{
      ev.target.appendChild(document.getElementById(image));
      document.getElementById(image + "results").style.backgroundColor='red';    
      this[image] = 0;
  } 

  amount = (parseInt(drag1) + parseInt(drag2) + parseInt(drag3)); 
  var answered = 0;

  var divs = [document.getElementById("div1"),document.getElementById("div2"),document.getElementById("div3")];

[].forEach.call(divs, function(el) {
  hasContent(el);
});

function hasContent(el) {
    if (el.innerHTML.trim() !== '') {
    answered ++;
    }
    else(console.log(el.id + ' has no content!'))
    }
      document.getElementById('result').innerHTML=amount;
    document.getElementById('drops').innerHTML=answered;

    if (answered == 3){
    $("#finish").fadeIn();
    }
    else{
    $("#finish").fadeOut();
    }
}

Javascript с Touch работает, но вызывает проблемы:

    var draggable1 = document.getElementById('drag1');
    var draggable2 = document.getElementById('drag2');
    var draggable3 = document.getElementById('drag3');

    var wrapper = document.getElementById('wrapper');

    /* the drag function */
    draggable1.addEventListener('touchmove', function(event) {

    // make the element draggable by giving it an absolute position and modifying the x and y coordinates

    draggable1.className = draggable1.className + " absolute";

   // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
    wrapper.appendChild(draggable1);
    var touch = event.targetTouches[0];
    // Place element where the finger is
    draggable1.style.left = touch.pageX-25 + 'px';
    draggable1.style.top = touch.pageY-25 + 'px';

    event.preventDefault();

    }, false);

    //repeated code for draggable2 and 3 removed for brevity

        /* the drop function */
        draggable1.addEventListener('touchend', function(event) {

            // hide the draggable element, or the elementFromPoint won't find what's underneath
            draggable1.style.left = '-1000px';
            draggable1.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(draggable1, 'absolute');
            draggable1.removeAttribute('style');
            // put the draggable into it's new home
            if (endTarget !== 'undefined') {
                endTarget.appendChild(draggable1);
            }
        });

//repeated code for draggable2 and 3 removed for brevity

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