add btf-dragon-base and btf-dragon-container

README.md

@@ -78,6 +78,24 @@ $scope.shinyThings = function (item) {
 };
 ```
 
+### btf-dragon-base / btf-dragon-container
+Makes it so the drop zone and template container can be separated.
+Add `btf-dragon-base` to the dragon and `btf-dragon-container` to any child of the dragon.
+
+Example:
+```html
+<div btf-dragon="item in list">
+  {{item.name}}
+</div>
+<h2>Here they are separate so you can drop anywhere under the base</h2>
+<div btf-dragon="item in otherList" btf-dragon-base>
+  <h1>Drop On Me</h1>
+  <div btf-dragon-container>
+    {{item.name}}
+  </div>
+</div>
+```
+
 ## Example
 See [`example.html`](http://htmlpreview.github.io/?https://github.com/btford/angular-dragon-drop/blob/master/example.html).
 

dragon-drop.js

@@ -70,6 +70,18 @@ angular.module('btford.dragon-drop', []).
       }
     };
 
+    var findContainer = function(elem){
+      var children = elem.find('*');
+
+      for (var i = 0; i < children.length; i++){
+        if (children[i].hasAttribute('btf-dragon-container')) {
+          return angular.element(children[i]);
+        }
+      }
+
+      return null;
+    };
+
     var documentBody = angular.element($document[0].body);
 
     var disableSelect = function () {
@@ -184,8 +196,18 @@ angular.module('btford.dragon-drop', []).
         var valueIdentifier = match[3] || match[1];
         var keyIdentifier = match[2];
 
+        var duplicate = container.attr('btf-double-dragon') !== undefined;
+
         // pull out the template to re-use.
         // Improvised ng-transclude.
+        if (container.attr('btf-dragon-base') !== undefined){
+          container = findContainer(container);
+
+          if (!container){
+            throw new Error('Expected btf-dragon-base to be used with a companion btf-dragon-conatiner');
+          }
+        }
+
         var template = container.html();
 
         // wrap text nodes
@@ -204,8 +226,6 @@ angular.module('btford.dragon-drop', []).
         container.html('');
         container.append(child);
 
-        var duplicate = container.attr('btf-double-dragon') !== undefined;
-
         return function (scope, elt, attr) {
 
           var accepts = scope.$eval(attr.btfDragonAccepts);