Jump to content
Search Community

Draggable + ng-repeat = z-index problems

BirdInTheCity test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

See the Pen ByGReg?editors=101 by BirdInTheCity (@BirdInTheCity) on CodePen

Link to comment
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

See the Pen RNLdpz by osublake (@osublake) on CodePen

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
Link to comment
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
Link to comment
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.
×
×
  • Create New...