Article From:https://segmentfault.com/q/1010000011708498
Question:

HTMLstructure

<div class="scale" id="bar">
            <div id="scaleprogress" name="scaleprogress" class="scaleprogress"></div>
            <div id="btn" class="btn">
              <span id="title" class="msg" ng-bind="refrigeratorTargetTemperature"></span>
            </div>
          </div>

JS

//Temperature skid adjustment$("#btn").On ("touchstart", function (E) {Var BTN = $("#btn");E.preventDefault ();If (e.targetTouches.length = = 1) {Var touch = e.targetTouches[0];Var disX=touch.pageXVar DIsY=touch.pageYVar bar = $("#bar");Var width= bar.clientWidth;Btn.on ("touchmove", move);Function move (E) {Var touch2=event.targetTouches[0];Var l=touch2.pageX-disX;If (l< 0) {L=0;};If (l> width) {L=width;};Btn.css ("left", l+'px');};Btn.on ("touchend", Chend);Function Chend (E) {Btn.off ("touchmove", move);Btn.off ("touchend", Chend);};};}, false);

Drag-and-drop sliding is currently implemented, but one small bug is that the drag-and-drop slider always starts from the starting point after the first stop of the drag.

Also, you want to know how to listen for forward calls to increase the temperature, backward slides to decrease the temperature, and how to listen for the sliding direction.

Answer 0:

After each slide, you need to record the end position.
The next slide will start again from the end of the last slide.

As for the temperature increase upward, the decrease downward can be judged by the difference between the Y coordinate of the starting point and the Y left of the ending point.

var startPosition = {};
var endPosition = {};
var distance = 0'; // Record sliding distanceBox.addEventListener ('touchstart', function (E) {/ / record start positionStartPosition.y = e.toucheS[0].pageY;});Box.addEventListener ('touchend', function (E) {/ / record end positionEndPosition.y = E.CHangedTouches[0].pageY;MoveY = endPosition.y - startPosition.y;If ((distance) {/ / /First slide, record sliding distance.Distance = moveY;} else {/ / slide second times later.If (moveY > 0) {/ / down, temperature reductionDistance = (distance - moveY) = = = 0? 0:distance - moveY;} elSe {/ / up, temperature increase.Distance = distance + moveY;}}});

Add the record location code, and define the distance variable to record the defined temperature value.
On the basis of addition and subtraction of the value, the next slide can be calculated from the beginning of the last temperature.

If your opinion is wrong, please correct me.

Leave a Reply

Your email address will not be published. Required fields are marked *