Question

查看AngularJS网站（http://docs.angularjs.org/guide/compiler）的指南，我有：

app.directive('task', function($document){
    return {
        restrict: 'C',
        link: function(scope, element, attr) {
            var startX = 0, startY = 0, x = 0, y = 0;
            element.on('mousedown', function(event) {
                // Prevent default dragging of selected content
                event.preventDefault();
                startX = event.screenX - x;
                startY = event.screenY - y;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            });

            function mousemove(event) {
                y = event.screenY - startY;
                x = event.screenX - startX;

                element.css({
                    top: y + 'px',
                    left:  x + 'px'
                });

            }

            function mouseup() {
                $document.unbind('mousemove', mousemove);
                $document.unbind('mouseup', mouseup);
            }
        }
    }
});

这很好用，除了我不想要平滑的拖动功能。相反，我想拖动项目说200px，然后我希望它捕捉到那个位置，然后如果移动另一个200，然后再次快照。我怎么能这样做？

Answer 1

如果您有固定网格，只需将其应用于X和Y坐标，如下所示：

y = event.screenY - startY;
x = event.screenX - startX;
y = y - ( y % gridSizeY );
x = x - ( x % gridSizeX );

AngularJS - 捕捉拖动

1 个答案: