Question

我正在使用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，但我需要它在它被丢弃的任何地方时回来，除了丢弃区域，在我的情况下是没有的，它对回来的东西没有帮助。

Answer 1

即使这是一个有点旧的线程，我也有同样的要求，最后还是要修改ngDraggable.js。对我来说，变化很简单。要拖动的元素的左侧位置始终为0，因此我只更改了在onmove指令中onlongpress和ngDrag函数中设置_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功能中进行类似的更改。

Answer 2

如果这类似于Dragula，那么您可以尝试找出克隆所继承的类。例如，在Dragula中，有一个新元素看起来像您正在使用.gu-mirror类拖动的对象。观察该元素，我注意到在拖动它时，“ left”和“ top”样式是根据我拖动元素的位置进行修改的。因此，为确保只能上下拖动元素，我通过在CSS中将其设置为“ left：0px！important”来锁定了“ left”样式。看看这是否对您有帮助。当然，这不是Dragula，但我相信这种方法会非常相似。

允许仅在一个方向上拖动ng-drag元素

2 个答案: