AngularJS - 捕捉拖动

Posted 2023-05-08

【中文标题】AngularJS - 捕捉拖动

【英文标题】：AngularJS - Snapping drag

【发布时间】：2014-05-24 21:28:06

【问题描述】：

查看来自 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);
            
        
    
);

这很好用，除了我不想要平滑拖动功能。相反，我想将项目拖动 200 像素，然后我希望它捕捉到该位置，然后如果再移动 200 像素，然后再次捕捉回来。我该怎么做？

【问题讨论】：

你可以使用jquery ui拖拽，它有丰富的api支持你的场景

【参考方案1】：

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

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