To explain what I am trying to do I have created an example where you can play with:

I want to draw multiple tiles green while my mouse is down. This:

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

works only when the mouse is going down on the element not outside.

Is there an way to check if the mouse is already down and draw the tiles green?

Please use the code I made to create an working example.

To explain what I am trying to do I have created an example where you can play with:

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

I want to draw multiple tiles green while my mouse is down. This:

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

works only when the mouse is going down on the element not outside.

Is there an way to check if the mouse is already down and draw the tiles green?

Please use the code I made to create an working example.

• javascript
• angularjs

• Don't do it with angular ngWhatever. Write your custom directive to handle onmouseover, onmousedown, etc events. – dfsq Commented Aug 9, 2014 at 21:17
• @dfsq Can you create an working example? – Ismail Commented Aug 9, 2014 at 21:53

1 Answer 1

You'll have to include a few more event handlers, for mouseup and mousemove, like this

<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>

Then add the functions

$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;
}

This sets a flag when the mouse is down, and sets the color when the cursor moves over an element and the mouse is down.

PLNKR