只允许向一个方向拖动ng-drag元素

allow ng-drag element to be dragged in one direction only

本文关键字：方向 一个 拖动 ng-drag 元素      更新时间：2023-09-26

我使用https://github.com/fatlinesofcode/ngDraggable.

<div  ng-drag="true" 
ng-drop="true" ng-drag-start="example($data,$event)"  >
</div>

div将被放置在它被拖出的地方，它工作得很好。但是，我希望它只被拖向y方向。

我该怎么做?使用额外的自定义指令?功能?控制器吗?

另外，我希望元素可以根据屏幕的大小拖动到最大距离，我该如何添加这个约束?

我发现这个https://github.com/fumitoito/angular-draggable，但我需要它回来时，它被丢弃在其他任何地方，除了drop区域，这是没有在我的情况下，它没有帮助回来的东西。

即使这是一个有点老的线程，我也有同样的要求，最后诉诸于修改ngdragable .js。对我来说，改变很简单。要拖动的元素的左侧位置始终为0，因此我只更改了ngDrag指令中onmove和onlongpress函数中设置_tx变量的行:

if (_centerAnchor) {
    _tx = 0; // _tx = _mx - element.centerX - _dragOffset.left;
    _ty = _my - element.centerY - _dragOffset.top;
} else {
    _tx = 0; //_mx - _mrx - _dragOffset.left;
    _ty = _my - _mry - _dragOffset.top;
}

如果您使用ng-drag-clone，则需要在onDragMove函数中也进行类似的更改。

如果这类似于Dragula，那么您可以尝试找出克隆继承了什么类。例如，在Dragula中，有一个新元素看起来就像你用类.gu-mirror拖动的对象。观察这个元素，我注意到当我拖动它时，"left"answers"top"样式根据我拖动元素的位置进行了修改。因此，为了确保我只能上下拖动元素，我将"left"样式设置为"left: 0px!"重要"。看看这对你的案子有没有帮助。当然，这不是《德拉古拉》，但我相信方法会非常相似。

相关文章：