angularJS - 마우스 클릭으로 x 및 y 위치 가져오기(div)

angularJS - 마우스 클릭으로 x 및 y 위치 가져오기(div)

div 안에서 클릭한 위치에 아이템을 추가하는 기능을 만들었습니다.이 기능의 문제는 클릭할 때마다 문서의 x & y 위치가 div 안의 x & y 위치가 아니라 x & y 위치가 된다는 것입니다.그래서 내가 실제로 원하는 것은, 내 div의 왼쪽 상단 모서리에 x=0 & y=0이 주어져야 하는데, 이것이 가능한지 모르겠다는 것이다.그리고 다른 방법이 있을 것 같은데..

$scope.addOnClick = function(event) {
        $scope.items.push( {
            "label": "Click",
            "value": 100,
            "x": event.x-50,
            "y": event.y-50,
        })
}

옷을 갈아입어야 한다event.x로.event.offsetX그리고.event.y로.event.offsetY

템플릿 정의를 추가하지 않았지만 다음 경우에 대비하여 추가하겠습니다.

<div ng-click="addOnClick($event)"></div>

html 파일에서 다음을 사용합니다.

<div (click)="test($event)"></div>

ts 파일의 함수:

function test(e){
 console.log(e.clientX);
 console.log(e.clientY);
}

드래그 라이브러리를 사용하여 드래그된 요소의 위치를 원하는 각도 사용자:

<div ng-click="OnDrag($event)"></div>

컨트롤러에 있습니다.

$scope.onDrag($event){
      console.log("X ->",$event.originalEvent.pageX,"Y ->",$event.originalEvent.pageY)

 }

언급URL : https://stackoverflow.com/questions/14389986/angularjs-getting-x-y-positions-from-mouseclick-in-div