javascript - 如何将 ngMouseMove 事件计算与我的 div 对齐

Question

我创建了一个自定义 slider ，您可以在下面的 fiddle 中看到它: http://jsfiddle.net/dorcohen/tf8aj7sj/

我正在尝试通过以下方式将鼠标光标与 ngMouseMouse movementX 元素对齐:

$scope.dragInProgress = function (event) {
    if ($scope.inProgress) { 
            $scope.level += Math.ceil(event.movementX);
        }
    };

问题是我无法理解如何将光标一直放在 div 上(考虑到移动方向和速度。

Answer 1

根据这个answer似乎(谢天谢地)无法更改鼠标指针位置。

但是我认为您是从错误的 Angular 来解决问题的。如果我没看错的话，保持指针位置与拖动 handle 同步的目的是让用户体验更愉快。

虽然缺少此类 DOM API，但有一个简单的解决方法。诀窍是在 document 级别附加 mousemove 事件，允许鼠标位置自由移动。

换句话说，您可以将 dragStarted 更改为:

var mousmove = function(event) {
    $scope.$apply(function() {
        $scope.dragInProgress(event);
    });
};
var target;
$scope.dragStarted = function(event) {
    target = event.target;
    $document[0].addEventListener('mousemove', mousmove);
    $scope.inProgress = true;
};

然后使用mousemove事件计算新的 slider 位置:

$scope.dragInProgress = function(event) {
    if ($scope.inProgress) {
        var markerBox = target.getBoundingClientRect();
        var containerBox = target.parentNode.getBoundingClientRect();
        var space = containerBox.width;
        var x = event.clientX;
        var percentage = (Math.min(Math.max(containerBox.left, x), containerBox.right) - containerBox.left) / space;
        $scope.level = percentage * 100;
    }
};

这是 an updated fiddle .