2017-11-13 1 views
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; 
     }; 

}); 
+0

を参照これらのCSSプロパティを追加g、あなたのdivの適切なオフセットを指定して 'event.pageX'または' event.clientX'を使ってみてください。もっと詳しくはこちら:[mouse events](http://www.angularjshub.com/examples/eventhandlers/mouseevents/) –

答えて

0

がちょうど

border: none; 
color: transparent; 
text-shadow: 0 0 0 gray; 
text-align: center; 
&:focus { 
outline: none; 
} 

は `event.offsetX`が変るを保持しているため、それがちらつくplunker http://embed.plnkr.co/9WntGyBLQxYSxkFjDAy2/

+0

ありがとう、しかし私はまだそれがちらつくことを見る:( – ps0604

関連する問題