BirdInTheCity

Draggable + ng-repeat = z-index problems

Recommended Posts

I'm trying to use the amazing Draggable plugin to create a re-orderable list of items in AngularJS.

 

The implementation was easy to set up on static data, but when I switched to dynamic data using ng-repeat, there are z-order issues for any items dragged down the list. [see codepen]  I attempted to manually set the z-order of the element, but that didn't change anything.

 

I realize this is more of an 'angular' thing than a 'draggable' thing, but I was wondering if anyone has any potential solutions?

Share this post


Link to post
Share on other sites

Hi BirdInTheCity

 

I can look at your code later tonight, but I'm can almost guarantee you that the problem is related to how your elements are nested.

 

In the meantime, check out this Drag and Drop demo. It's in jQuery so more people could follow it, but it's based off of some directives that I made, so you should be able to tell how it would work in Angular.

 

The createTile function would be a directive that is repeated using ng-repeat. The layoutInvalidated function would be an injected service. And everything else would be part of a parent directive or controller.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks OSUblake!  This helps so much.  With your code, I discovered that I should have put made the parent element Draggable, which eliminated the z-index issue.  Definitely going to use this demo as a template for the code I hope to write.

 

Cheers!

Share this post


Link to post
Share on other sites

Glad you were able to figure it out  :D

 

Angular is all about adding and removing elements from the DOM, which actually adds a new layer of complexity to animations than most people are used to. The biggest problem is dealing with the document flow changing and elements not being positioned where you want them to. Especially when transitioning between 2 elements.

 

What I've found to be helpful in a lot situations is to use the directive as an element instead of an attribute, and use that as a wrapper for my template (Note: this might require the use of ng-transclude depending on the scope).

 

If you don't add any styling to your directive element, it will have a size of 0, and won't be part of the document flow, kind of like a span tag. This will allow all its siblings to be positioned from the same origin, which makes positioning much easier, especially when using something like Draggable. But of course this all depends on the situation.

<!-- This won't mess up the document flow -->
<dragdrop>
  <div class="box">
    <p>{{item.text}}</p>
  </div>
</dragdrop>
  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.