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

Question

我创建了一个自定义滑块，您可以在下面看到它 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 似乎 （谢天谢地） 无法更改鼠标指针位置。

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

虽然缺少 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事件计算新的滑块位置：

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

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

How to align ngMouseMove event calculation with my div

javascript

css

angularjs

onmousemove