1

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

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

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

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

4

1 回答 1

1

根据这个答案，似乎（谢天谢地）不可能改变鼠标指针的位置。

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

但是，对于缺少此类 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;
    }
};

这是一个更新的小提琴。

于 2016-01-10T18:52:25.587 回答