AngularJS TouchMove на нескольких объектах

Question

У меня есть список предметов, и когда я перемещаю палец по каждому из них, я хочу получить идентификатор, например, каждого предмета. Он работает с мышью, но не с сенсорным. Я использую эту библиотеку: https://github.com/nglar/ngTouch

HTML:

<p class="text-center" > item : {{current}}</p>
<p class="text-center" > state : {{state}}</p>
<div class="row" ng-repeat="item in items" >
    <div ng-style="{background: color}" 
            style="width:100px;height:100px;margin-top:10px;margin-left:auto;margin-right:auto" 
            ng-touchstart="onTouchstart(item)" 
            ng-touchmove="onTouchmove(item)" 
            ng-touchend="onTouchend(item)">
        <p>{{item}}</p>
    </div>
</div>

JS:

$scope.items    = ["1" , "2" , "3"];
$scope.current  = "0";
$scope.state    = "waiting..."
$scope.color    = "red";

$scope.onTouchstart = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch start"
}

$scope.onTouchmove = function(item) {
   $scope.current  = item;
   $scope.state    = "Touch move"
}

$scope.onTouchend   = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch end"
}

Он работает нормально, если я в текущем элементе, он обнаруживает 3 движения. Но, например, когда я касаюсь предмета 1 и перемещаю палец к предмету 2, он не обнаруживает его, он все еще находится на предмете 1.

Answer 1

Вам нужно будет получить область действия элемента, к которому вы прикоснулись, основываясь на других критериях, таких как позиция, например.

e.preventDefault();
var touch = e.originalEvent.changedTouches[0] || e.originalEvent.touches[0] || e.touches[0] || e.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
var element = document.elementFromPoint(x, y);
var scope = angular.element(element).scope();