Using ui.sortable with angular ui.bootstrap.tabs have a weird interaction

[hghammoud]

If you look at the following plunker http://plnkr.co/edit/0qeS4x?p=preview

if we place tabs inside tabset you will see that the drag moves all of the tabs heading not just the one selected. If you seperate them like in version 2 on the same plunker it works. Is there something i am doing wrong or is it a bug/missing feature?

TY

[thgreasi]

My attempt showed that the tabset directive transcludes a <div> (on which the ui-sortable is applied) and nests a <ul>.

ui-sortable directive expects to be applied on the exact parent of the list. That looks like to be the cause of problem. Take a look at #162, you might find the proposed solution simpler/lighter.

[hghammoud]

That is what is shown in the plunker and what I ended up implementing but the code would have been cleaner if the plugins interacts well with each other!

Do you have an idea how we can fix this ?

[thgreasi]

This directive needs to be applied on the parent of the draggable elements and that makes it difficult to work nice with other directives that do transcludes. I will try to create a custom option, so that the developer can provide a CSS selector to target the resulting transcluded element. The option name might look like ui-target-element-selector.

I will create a separate branch to work on it but:

• don't expect it before v0.14.0
• it might still have problems with some directives