Geek Answers Handbook

Angular, a nested break directive (packaging + dragabilly)

I have a little problem using dragabilly in angular, the problem is odd because it worked until I made some changes to the way content using packaging, in particular adding a level of nested repeats. When I do this, the package still works correctly, but dragabilly seems to work only on the first object.

html looks like

<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">

So, this is just a nested repeat when the package ends with external elements, and again the package element works fine. It broke when I was added to the nested repeat - these objects have several faces that I hide from the other side. So you see there, however, the drag handle is inside the nested repeat, and I think this may be a problem, or maybe the nested one takes a bit more time to load and it doesn't recognize the handle in time? I am not too sure, and where I could use some direction.

Here is the directive - http://jsfiddle.net/yq4zwLzs/ . The only thing I added to this is that the mobile UA is checking to try to disable dragabilly on mobile devices, because at this point it is not necessary. I tried to take it off, it didn’t produce anything.

Here is the plunker of this in action -

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

Forgive the ugliness - but if you look, you can navigate the top element, but not the bottom. This is where I am stuck, and I cannot understand how and why this happens. You can drag and drop elements using .handle (title element). I would appreciate any help as I seem to be stuck here.

Thanks for reading!

Refresh

It seems that even if I put the pen outside of the inner repeat, it still has the same problem. Perhaps this is due to the order of the internal repetition and angular packaging?

Update 2

It seems that the drag and drop logic does not work at all, you can drag anything, not just .handle

Update 3

I am pretty sure that this is due to nested ng-repeat (maybe it interacts in conjunction with how this directive works on an object), because no matter what I try, as long as I have nested repeat, I have that same problem. If I pulled it out, it will return to normal operation, however, without it it will be difficult to achieve my desired goal: (.

Also - if I come back

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

in

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

It works great. I need a drag and drop control, because it will contain content inside these divs that the user will interact with, and I don’t want the div to move when they click inside it. Maybe if there is a way to initiate dragabilly a bit later?

+7
javascript angularjs packery
source share
1 answer

It looks like this might be a digest issue, as if you were inserting a Draggabilly creation in $ timeout, it works as expected

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

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

One remark that I noticed during the game is if you use a different option than handle , for example { axis: 'x'} , then it works without the need for $timeout .

+5
source share

More articles:


All Articles