Question

我正在为一家小型慈善博物馆构建基于触摸屏Windows的交互式控制台。互动式广告将以Kiosk模式的Chrome浏览器为基础。

交互式的一部分是测验，其中包含一些可拖放的HTML元素

我的问题是，尽管页面可以用鼠标完美运行，但拖放功能在基于Windows的触摸屏上不起作用。

我已经设法使用这里的建议进行拖放操作，但是，这导致页面的其他元素无法正常工作。例如，在正常工作的javascript中，我防止将多个项目放入同一个div中，根据答案是否正确，将某些指标divs变为红色或绿色，如果三个答案均正确，还显示一个按钮以转到下一个问题被制成。这个版本似乎还允许将div放到页面上的任何div上，而不仅仅是可放置的elemtns。

我还尝试了jQuery UI Touch Punch，我知道它将仅将触摸转换为鼠标手势，但什么也不做。

该页面正在使用jQuery-v1.7.2和jQuery UI-v1.8.21

请帮忙，我的想法不多了。这仅需要在PC上的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正常运行，但会导致问题：

    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)') ,'');
        }

使用拖放HTML5触摸

0 个答案: