Evaluate 'btf-dragon-drop' callback if an item was dropped on a targe…

…t area Hackish merge of btford#25 Conflicts: dragon-drop.js example.html
jimschubert · Jan 22, 2015 · c1a5c47 · c1a5c47
1 parent 9a3555c
commit c1a5c47
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/dragon-drop.js b/dragon-drop.js
@@ -203,12 +203,18 @@
                         isTrash = angular.isDefined(dropArea.attr('data-dragon-trash'));
                     if (isList) {
                         var expression = dropArea.attr('data-dragon');
+                        var dropCallback = dropArea.attr('data-dragon-on-drop');
                         var targetScope = dropArea.scope();
                         var match = expression.match(REPEATER_EXP);
 
                         var targetList = targetScope.$eval(match[2]);
+                        var targetCallback = targetScope.$eval(dropCallback);
+
                         targetScope.$apply(function () {
                             add(targetList, dragValue, dragKey);
+                            if (targetCallback && angular.isFunction(targetCallback)) {
+                                targetCallback(dragValue, dragKey);
+                            }
                         });
                     }
                     else if (isTrash) {

diff --git a/example.html b/example.html
@@ -20,20 +20,20 @@
 <div ng-cloak class="container" ng-controller="MainCtrl">
 
     <div class="row">
-        <h2>Dragon Drop Example</h2>
+        <h2>Dragon Drop Example (with on-drop)</h2>
     </div>
 
     <hr>
     <div class="row">
         <div class="span6">
             <h3>Things</h3>
 
-            <div data-dragon="thing in things">{{thing}}</div>
+            <div data-dragon="thing in things" data-dragon-on-drop="log">{{thing}}</div>
         </div>
         <div class="span6">
             <h3>Other Things</h3>
 
-            <div data-dragon="thing in otherThings">{{thing}}</div>
+            <div data-dragon="thing in otherThings" data-dragon-on-drop="log">{{thing}}</div>
         </div>
     </div>
 
@@ -63,7 +63,7 @@ <h2>Dragon Drop Eliminate Example</h2>
         <div class="span6">
             <h3>Things</h3>
 
-            <div data-dragon="thing in things" data-dragon-eliminate>{{thing}}</div>
+            <div data-dragon="thing in things">{{thing}}</div>
         </div>
         <div class="span6">
             <h3>Other Things</h3>
@@ -72,7 +72,7 @@ <h3>Other Things</h3>
         </div>
     </div>
     <div class="row">
-        <div class="span12" style="margin-top:1em;"><p>To eliminate, drop here (or anywhere there's no drop target)</p></div>
+        <div class="span12" style="margin-top:1em;"><p>To eliminate, drop here (or anywhere there's no drop target)</p>
     </div>
 
     <hr>
@@ -173,9 +173,12 @@ <h3>Other Things</h3>
 <script src="dragon-drop.js"></script>
 <script>
     angular.module('ExampleApp', ['dragon-drop']).
-            controller('MainCtrl', function ($scope) {
+            controller('MainCtrl', function ($scope, $log) {
                 $scope.things = ['one', 'two', 'three'];
                 $scope.otherThings = [];
+                $scope.log = function(value, key) {
+                    $log.info('Key: %s, Value: %s', key, value);
+                }
             });
 </script>
 </body>