Question

这个jsfiddle允许人们围绕一个正方形拖动。它使用angularjs。

我希望控制台在提起鼠标按钮后报告x，y坐标。目前，控制台仅发送STOPPING消息。以下是相关的控制器代码。

.controller('testCtrl', function($scope) { 
    $scope.dragOptions = {
        start: function(e) {
          console.log("STARTING");
        },
        drag: function(e) {
          console.log("DRAGGING");
        },
        stop: function(e) {
          console.log("STOPPING");
        },
        container: 'container'
    }

如何修改代码，以便控制台在提起鼠标按钮后报告x，y坐标？

编辑：已经为鼠标指针的x，y坐标提供了答案。假设我想获得正方形中心的x，y坐标。怎么办？

Answer 1

尝试Collection<Location> locations; // filled somewhere final Location here; List<Location> within100km = locations.stream() .filter(l -> haversine(l.getLatitude(), l.getLongitude(), here.getLatitude(), here.getLongitude()) <= 100) .collect(Collectors.toList()); public static double haversine( double lat1, double lng1, double lat2, double lng2) { int r = 6371; // average radius of the earth in km double dLat = Math.toRadians(lat2 - lat1); double dLon = Math.toRadians(lng2 - lng1); double a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); double d = r * c; return d; }。

Answer 2

将console.log(e.clientX + ", " + e.clientY);添加到console.log("STOPPING");后面的行会执行您想要的操作。鼠标位置包含在MouseEvent e中。

Answer 3

使用MouseEvent.clientX //获取水平坐标

MouseEvent.clientX //获取垂直坐标

Documentation

<强> Demo Here

Answer 4

对于矩形，您可以使用Element.getBoundingClientRect()。

所以你会有：console.log(e.target.getBoundingClientRect());

文档here

在鼠标按钮事件发生后报告x，y坐标

4 个答案: