javascript - 如何知道触摸何时从一个 div 滑到另一个？

Question

我正在使用 jquery 开发一个移动应用程序，需要用户能够触摸并按住一个 div，然后滑到另一个 div。我不知道如何让第二个 div 注册触摸现在在它上面。

因此，例如，当某人触摸并按住 div 4，然后滑入 div 1、3、5 或 7 时，我希望能够知道他们滑入了哪个 div 并更改该 div 的内容。

这是我到目前为止的一些 fiddle : https://jsfiddle.net/hedonicmania/wuqa7a9y/4/

这是我到目前为止的代码:

html:

<div class="game-container">
    <div class="game-square" id="0" ></div>
    <div class="game-square" id="1" ></div>
    <div class="game-square" id="2" ></div>
    <div class="game-square" id="3" ></div>
    <div class="game-square" id="4" ></div>
    <div class="game-square" id="5" ></div>
    <div class="game-square" id="6" ></div>
    <div class="game-square" id="7" ></div>
    <div class="game-square" id="8" ></div>
</div>

CSS:

.game-container {
    width:300px;
    height:300px;
}
.game-square {
    width:100px;
    height:100px;
    float:left;
    /* inside border */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #222;
    position: relative;
}

js:

var divs = $('.game-square');

$('.game-square').bind('touchstart', function(){    
    var thisDiv = document.getElementById($(this).attr('id'));

    thisDiv.style.backgroundColor = '#FFB395';
});

$('.game-square').bind('touchend', function(){
    var thisDiv = document.getElementById($(this).attr('id'));

    thisDiv.style.backgroundColor = '#ADE8AF';
});

感谢您的帮助。

Answer 1

您可以通过使用 flag on 检查用户是否正在滑动 game-square 来做到这一点。您可以在 JSFiddle 上看到实现