diff --git a/README.md b/README.md
index dbc97a2..aa6e2b7 100644
--- a/README.md
+++ b/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
+
+ {{item.name}}
+
+Here they are separate so you can drop anywhere under the base
+
+
Drop On Me
+
+ {{item.name}}
+
+
+```
+
## Example
See [`example.html`](http://htmlpreview.github.io/?https://github.com/btford/angular-dragon-drop/blob/master/example.html).
diff --git a/dragon-drop.js b/dragon-drop.js
index 3222953..b21716f 100644
--- a/dragon-drop.js
+++ b/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);