Question

我有一个5 * 5网格，我想要做的是模仿绘图动作，而不是当我按下（用我的手指，它被认为是一个移动应用程序）在一个方格上它改变它的背景颜色。我已经成功完成了这一部分并且工作正常。

我现在要做的是，当我将手指移到屏幕上时，它会改变我的手指按压（进入其表面）的每个方格的颜色，就像绘图一样。

我知道有一个touchenter活动，但我不明白我该如何使用它我读了一些教程和文章，到处都说它是影院活动的结果......“＃/ p>

我怎样才能获得我触摸过的元素的id？

任何帮助都会非常棒！

HTML

.b{
    width: 50px; 
    height: 50px; 
    display: inline-block;
    border: red 1px solid;
}

CSS

createLoop();
$('.b').bind('touchmove',StartDragSelect);

function createLoop(){
    var length = 30;
    var text = "";
    var demo = $("#demo")
    for (i = 0; i < length; i++) {
     var rowElement = $('<div class="a"></div>');
     demo.append(rowElement);
        for(var x = 0; x < length; x++){
            createGridItem(rowElement,i,x);
        }
    }
}

function createGridItem(rootElement, i, x){
    var pix = 10;
    var currItem = $('<div class="b" id="a'+i+x+'" style="top:' + i*pix +'px; left: ' + x*pix +'px;  background-position-x: -' + x*pix +'px ; background-position-y:-' + i*pix +'px";"></div>');
    $(rootElement).append(currItem);
}

function StartDragSelect(obj)
{
    obj = obj.currentTarget;
    $(obj).css({"background-color":"blue"});    
}

JS

{{1}}

Answer 1

查看https://api.jquerymobile.com/swipe/

这是一个jQuery lib。

Answer 2

我如何检查我是否高于元素？我应该参考哪个参数用来检查吗？

这是一个获取元素位置的函数（gridview单元格）。使用x和y坐标，您可以为它们添加高度和宽度，以计算当前触摸位置是否高于元素。

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

要使用此功能，您可以这样做

  var y = getPosition(document.getElementById('cell1')).y;
  var x = getPosition(document.getElementById('cell1')).x;

Javascript在touchmove事件上更改div bg的颜色

2 个答案: