AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<div ng-controller="todoctrl">
<div>
{{ some }}
</div>
<div ng-repeat="i in items" ng-mousedown="mousedown(i);" ng-mouseup="mouseup($event);" onselectstart="return false">
<div ng-mousemove="mousemove($event,$index)" ng-class="getClass($index);">{{ i.content }}22</div>
</div>
</div>
</div>
CSS
.selected {
background-color:green;
}
JavaScript
function todoctrl($scope) {
$scope.selected = {};
$scope.items = [{content:'abc'},{content:'def'},{content:'ghi'}];
$scope.getClass = function(index){
if($scope.selected[index]){
return 'selected';
}else{
return '';
}
};
var mouseIsDown = false;
var changed = {};
$scope.mousedown = function(objectt){
$scope.some = objectt.content;
};
$scope.mouseup = function($event){
mouseIsDown = false;
};
$scope.mousemove = function($event,$index){
alert($index);
if(mouseIsDown && !changed[$index]){
$scope.selected[$index] = $scope.selected[$index] || false;
$scope.selected[$index] = !$scope.selected[$index];
changed[$index] = true;
}
};
}