javascript - angularjs - 鼠标按下并在鼠标按下事件时在元素上移动？

Question

为了解释我正在尝试做的事情，我创建了一个您可以玩的示例:

http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview

我想在鼠标按下时绘制多个绿色方 block 。 这:

<div ng-mousedown="drawImage($parent.$index,$index)"></div>

只有当鼠标在元素上而不是外部时才有效。

有没有办法检查鼠标是否已经按下并绘制绿色的瓷砖？

请使用我制作的代码来创建一个工作示例。

Answer 1

您必须包含更多的事件处理程序，用于 mouseup 和 mousemove，如下所示

<div class="tile" ng-repeat="x in y track by $index" ng-class="x" ng-mouseup="removeFlag()" ng-mousedown="setFlag($parent.$index,$index)" ng-mousemove="drawImage($parent.$index,$index)"></div>

然后添加函数

$scope.drawImage = function(y,x){
  if ($scope.mouseIsDown)
    $scope.map[y][x] = "green";
}

$scope.setFlag = function(y,x){
   $scope.mouseIsDown = true;
   this.drawImage(y,x)
}

$scope.removeFlag = function(){
   $scope.mouseIsDown = false;
}

这会在鼠标按下时设置一个标志，并在光标移到元素上时设置颜色并且鼠标按下。

PLNKR