7

我在角度中使用 Dragabilly 时遇到了一个小问题,这个问题很奇怪,因为它一直在工作,直到我对使用 packery 的内容的加载方式进行了一些更改,特别是添加了一个嵌套重复级别。当我这样做时,packery 仍然可以正常运行,但是它似乎可以拖动只在第一个对象上运行。

html看起来像 -

 <div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
    <!-- nested repeat -->
    <div ng-repeat="side in widget.sides" ng-show="side.active">

所以这只是一个嵌套重复,其中包装器从外部项目中运行,并且包装器元素工作正常。当我在嵌套重复中添加时它坏了 - 这些对象有多个面,我用那一侧隐藏。你看到那里,但是拖动手柄在嵌套重复内,我认为这可能是问题,或者嵌套是加载时间更长,并且无法及时识别手柄?我不太确定,那是我可以使用一些方向的地方。

这是指令 - http://jsfiddle.net/yq4zwLzs/。我添加的唯一内容是移动 UA 检查以尝试关闭移动设备上的可拖动性,因为此时没有必要。我试过把它取下来似乎没有任何影响。

这是它的一个动作 -

http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview

原谅丑陋 - 但如果你看,你可以移动顶部的项目,但不能移动底部的项目。这就是我被卡住的地方,我似乎无法弄清楚这是如何发生的或为什么会发生。您可以通过 .handle (标题元素)拖动项目。我将不胜感激任何帮助,因为我似乎被困在这里。

谢谢阅读!

更新

似乎即使我将 .handle 放在内部重复之外,它仍然存在同样的问题。也许它与内部重复和棱角分明的包装运行的顺序有关?

更新 2

似乎拖动句柄逻辑根本不起作用,您可以拖动任何东西,而不仅仅是 .handle

更新 3

我几乎可以肯定这与嵌套的 ng-repeat (也许它与指令如何在对象上运行交互)有关,因为无论我尝试什么,只要我有嵌套的重复,我就有相同的问题。如果我把它拉下来,它会恢复正常工作,但是如果没有它,我将很难实现我想要的目标:(。

还有——如果我转身

var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );

进入

var draggable2 = new Draggabilly(element[0] );

它工作正常。不过,我需要一个拖动手柄,因为这些 div 中会有用户将与之交互的内容,并且我不希望 div 在他们在其中单击时四处移动。也许如果有一种方法可以稍后启动 Dragabilly?

4

1 回答 1

5

看起来这可能是一个摘要问题,就好像您将 Draggabilly 的创作放在 $timeout 中,它按预期工作

if(!isMobile()){
    $timeout(function(){
        var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
        $rootScope.packery.bindDraggabillyEvents(draggable2);
    })
}

http://plnkr.co/edit/qxv1VWPHZEKX3pVHgBi2?p=preview

我在摆弄它时注意到的一件事是,如果您handle使用{ axis: 'x'}$timeout.

于 2014-12-18T15:50:20.780 回答