0
In this plunkマウスをドラッグする必要があるdivがあります。私はマウスアップ/ムーブ/ダウンイベントを使用しています。私が持っている問題は、私が下にドラッグするとdivが "ちらつく"ということです。これを修正するには?角度をつけてdivを描画するときに点滅する問題
HTML
<style>
.frame {
width: 300px;
height: 300px;
background-color: orange;
position: relative;
}
.sel{
border:2px solid black;
background-color: #ffffff;
position:absolute;
}
</style>
<div class="frame" ng-mousedown="mouseDown($event)"
ng-mousemove="mouseMove($event)"
ng-mouseup="mouseUp()">
<div class="sel" ng-show="show"
ng-style="{top:selTop+'px', left:selLeft+'px', width:selWidth+'px', height:selHeight+'px'}"></div>
</div>
Javascriptを:
var app = angular.module('app', []);
app.controller('ctl', function ($scope) {
$scope.startPoint = {};
$scope.show = false;
$scope.mouseDown = function(event) {
$scope.startPoint = { x: event.offsetX, y: event.offsetY };
$scope.show = true;
};
$scope.mouseMove = function(event) {
if (!$scope.startPoint.x)
return;
$scope.selTop = $scope.startPoint.y;
$scope.selLeft = $scope.startPoint.x;
$scope.selHeight = event.offsetY - $scope.startPoint.y;
$scope.selWidth = event.offsetX - $scope.startPoint.x;
};
$scope.mouseUp = function() {
$scope.startPoint = {};
$scope.show = false;
};
});
を参照これらのCSSプロパティを追加g、あなたのdivの適切なオフセットを指定して 'event.pageX'または' event.clientX'を使ってみてください。もっと詳しくはこちら:[mouse events](http://www.angularjshub.com/examples/eventhandlers/mouseevents/) –