移动-如何使用JS或纯CSS创建“虚拟数字锁”

Question

I'm experienced with web development, but I'm trying to learn some mobile and I'm not entirely sure I understand how to work with touch events. I looked at some guides ( for example ), but I'm not sure how to apply it in my case.

Consider this (ignore the quality of the code, I just doodled this quickly to explain my question):

 var span = $("span"), btns = $("button"); btns.on("click", function() { var $this = $(this), action = $this.data("action"), curVal = parseInt( span.text() ); btns.prop("disabled", false); if (action == "less") { span.text(curVal-1); if (curVal == 2) $("#less").prop("disabled", true); } else { span.text(curVal+1); if (curVal == 8) $("#more").prop("disabled", true); } }); 

 * { font-family: sans-serif; } button { background: #eee; padding: 10px; margin: 5px; font-weight: bold; border: 1px dashed black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="less" data-action="less" disabled="disabled">&lt;</button> <span>1</span> <button id="more" data-action="more">&gt;</button> 

I want to do that, but instead of buttons, I want it to respond to touch movement. ie, when you slide your fingers right it would react like clicking on the right button and vice-versa. ideally, you would be able to slide back and the number would snap to your finger (sort of like a virtual number lock, like below, though horizontal)

I can measure the movement with touchmove and try to sync it visually but that seems like it would take ages and be a bugstrosity. Is there a better\\simpler way? (related: is there a way to do this with pure CSS?)

Answer 1

Depending on how many touch events you want to support, I would look for an open source js library to handle this

One good example is HammerJS