AngularJS - 鼠标按下并在鼠标按下事件期间移动元素？

Question

AngularJS - 鼠标按下并在鼠标按下事件期间移动元素？

4

为了解释我正在尝试做什么，我创建了一个示例供您参考： http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview 当我的鼠标按下时，我希望能够绘制多个绿色图块。

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

该元素仅在鼠标向下移动到该元素上时才有效，而不是在元素外。

有没有一种方法可以检查鼠标是否已经按下并将瓦片绘制为绿色？

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

- Ismail

不要使用Angular的ngWhatever。编写自定义指令来处理onmouseover、onmousedown等事件。 - dfsq

@dfsq 你能创建一个可工作的示例吗？ - Ismail

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

你需要添加几个事件处理程序，包括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