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

我创建了一个自定义滑块，您可以在下面的小提琴中看到它：
http://jsfiddle.net/dorcohen/tf8aj7sj/

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

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

问题是我不明白如何一直将光标放在div上（考虑到移动方向和速度）。

最佳答案

按照这个answer，（很遗憾）似乎无法更改鼠标指针的位置。

但是，我认为您从错误的角度解决了这个问题。如果我读得正确，则使指针位置与拖动手柄保持同步的目的是使用户体验更愉快。

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

换句话说，您可以将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事件计算新的滑块位置：

$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。