Added support for child containers and initialization after view init

README.md

@@ -186,6 +186,11 @@ export class EventExample {
 }
 ```
 
+## Special dragulaOptions for ng2-dragula
+
++ initAfterView: Allows for delayed initialization of the directive. Binds in Angulars AfterViewInit event.
++ childContainerSelector: Allows the ability to use a child element as the container for drag and drop when access to the element is not possible. Uses querySelector for finding the child element from directives container.
+
 ## Special Events for ng2-dragula
 
 | Event Name |      Listener Arguments      |  Event Description |

demo/src/app/app.component.ts

@@ -21,6 +21,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
       <repeat-example></repeat-example>
 
       <nested-repeat-example></nested-repeat-example>
+
+      <table-example></table-example>
     </div>
   `,
   encapsulation: ViewEncapsulation.None

demo/src/app/examples.ts

@@ -194,6 +194,53 @@ export class NestedRepeatExampleComponent {
   ];
 }
 
+@Component({
+  selector: 'table-example',
+  templateUrl: './templates/table-example.html'
+})
+export class TableExampleComponent {
+  public constructor(private dragulaService:DragulaService) {
+    dragulaService.setOptions('table-bag', {
+      revertOnSpill: true
+    });
+  }
+}
+
+@Component({
+  selector: 'table-example-child',
+  template: `
+        <table class="table">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Name</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><div class="bars"></div></td>
+                        <td>Tester</td>
+                        <td>Active</td>
+                    </tr>
+                    <tr>
+                        <td><div class="bars"></div></td>
+                        <td>James</td>
+                        <td>Active</td>
+                    </tr>
+                    <tr>
+                        <td><div class="bars"></div></td>
+                        <td>Alex</td>
+                        <td>Active</td>
+                    </tr>
+                </tbody>
+            </table>`
+})
+export class TableChildExampleComponent {
+  public constructor() {
+  }
+}
+
 export const EXAMPLES:any[] = [
   ExampleAComponent,
   ExampleBComponent,
@@ -203,5 +250,7 @@ export const EXAMPLES:any[] = [
   MuchExampleComponent,
   WowExampleComponent,
   RepeatExampleComponent,
-  NestedRepeatExampleComponent
+  NestedRepeatExampleComponent,
+  TableExampleComponent,
+  TableChildExampleComponent
 ];

demo/src/app/templates/table-example.html

@@ -0,0 +1,46 @@
+<div class='parent'>
+    <label for='hy'>Move table rows when dont have access to child elements</label>
+    <div class='wrapper'>
+        <div class="conatiner">
+            <table-example-child [dragula]='"table-bag"' [dragulaOptions]="{ childContainerSelector: 'tbody', initAfterView: true }">
+            </table-example-child>
+        </div>
+    </div>
+    <pre>
+      <code>
+&lt;table-example-child [dragula]='"table-bag"' [dragulaOptions]="{{'{'}} childContainerSelector: 'tbody', initAfterView: true {{'}'}}"&gt;
+&lt;/table-example-child&gt;
+
+Component(
+  selector: 'table-example-child',
+  template: `
+        &lt;table&gt;
+                &lt;thead&gt;
+                    &lt;tr&gt;
+                        &lt;th&gt;Name&lt;/th&gt;
+                        &lt;th&gt;Status&lt;/th&gt;
+                    &lt;/tr&gt;
+                &lt;/thead&gt;
+                &lt;tbody&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;Tester&lt;/td&gt;
+                        &lt;td&gt;Active&lt;/td&gt;
+                    &lt;/tr&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;James&lt;/td&gt;
+                        &lt;td&gt;Active&lt;/td&gt;
+                    &lt;/tr&gt;
+                    &lt;tr&gt;
+                        &lt;td&gt;Alex&lt;/td&gt;
+                        &lt;td&gt;Active&lt;/td&gt;
+                    &lt;/tr&gt;
+                &lt;/tbody&gt;
+            &lt;/table&gt;`
+)
+export class TableChildExampleComponent
+  public constructor() 
+
+
+      </code>
+    </pre>
+</div>