Add beforeDrop callback

angular-ui-tree · May 5, 2014 · 1fb2f63 · 1fb2f63
1 parent 28ccee1
commit 1fb2f63
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -229,6 +229,12 @@ The `dragStop` function is called when the user stop dragging the node.
 **Parameters:**
 Same as [Parameters](#eventParam) of dropped.
 
+##### beforeDrop(event)
+The `beforeDrop` function is called before the dragging node is dropped.
+
+**Parameters:**
+Same as [Parameters](#eventParam) of dropped.
+
 ### ui-tree-nodes
 `ui-tree-nodes` is the container of nodes. Every `ui-tree-node` should have a `ui-tree-nodes` as it's container, a `ui-tree-nodes` can have multiple child nodes.
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-ui-tree",
-  "version": "2.0.12",
+  "version": "2.1.0",
   "homepage": "https://github.com/JimLiu/angular-ui-tree",
   "authors": [
     "Jim Liu <https://github.com/JimLiu>",

diff --git a/demo/dist/angular-ui-tree.js b/demo/dist/angular-ui-tree.js
@@ -679,6 +679,10 @@
 
           };
 
+          callbacks.beforeDrop = function(event) {
+
+          };
+
           scope.$watch(attrs.uiTree, function(newVal, oldVal){
             angular.forEach(newVal, function(value, key){
               if (callbacks[key]) {
@@ -749,6 +753,10 @@
             scope.nodrop = ((typeof val) != "undefined");
           });
 
+          attrs.$observe('horizontal', function(val) {
+            scope.horizontal = ((typeof val) != "undefined");
+          });
+
         }
       };
     }
@@ -857,6 +865,7 @@
               }
               pos = $uiTreeHelper.positionStarted(eventObj, scope.$element);
               placeElm.css('height', $uiTreeHelper.height(scope.$element) + 'px');
+              placeElm.css('width', $uiTreeHelper.width(scope.$element) + 'px');
               dragElm = angular.element($window.document.createElement(scope.$parentNodesScope.$element.prop('tagName')))
                         .addClass(scope.$parentNodesScope.$element.attr('class')).addClass(config.dragClass);
               dragElm.css('width', $uiTreeHelper.width(scope.$element) + 'px');
@@ -1029,7 +1038,8 @@
                   } else if (targetNode.dragEnabled()){ // drag enabled
                     targetElm = targetNode.$element; // Get the element of ui-tree-node
                     var targetOffset = $uiTreeHelper.offset(targetElm);
-                    targetBefore = eventObj.pageY < (targetOffset.top + $uiTreeHelper.height(targetElm) / 2);
+                    targetBefore = targetNode.horizontal ? eventObj.pageX < (targetOffset.left + $uiTreeHelper.width(targetElm) / 2)
+                                                         : eventObj.pageY < (targetOffset.top + $uiTreeHelper.height(targetElm) / 2);
 
                     if (targetNode.$parentNodesScope.accept(scope, targetNode.index())) {
                       if (targetBefore) {
@@ -1058,6 +1068,9 @@
               e.preventDefault();
 
               if (dragElm) {
+                scope.$treeScope.$apply(function() {
+                  scope.$callbacks.beforeDrop(dragInfo.eventArgs(elements, pos));
+                });
                 // roll back elements changed
                 hiddenPlaceElm.replaceWith(scope.$element);
                 placeElm.remove();

diff --git a/demo/dist/angular-ui-tree.min.js b/demo/dist/angular-ui-tree.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -40,7 +40,7 @@ <h2>Examples</h2>
           <li><a href="tree.html">Unlimited nesting</a></li>
           <li><a href="trees.html">Connected trees</a></li>
           <li><a href="groups.html">Groups &amp; Categories</a></li>
-          <!-- <li><a href="accept.html">Limited drag &amp; drop</a></li> -->
+          <li><a href="filter.html">Filter</a></li>
         </ol>
       </div>
     </div>

diff --git a/demo/js/groups.js b/demo/js/groups.js
@@ -129,6 +129,11 @@
         } else { // save all
           $scope.saveGroups();
         }
+      },
+      beforeDrop: function(event) {
+        if (!window.confirm('Are you sure you want to drop it here?')) {
+          event.source.nodeScope.$$apply = false;
+        }
       }
     };
 

diff --git a/dist/angular-ui-tree.js b/dist/angular-ui-tree.js
@@ -1,5 +1,5 @@
 /**
- * @license Angular UI Tree v2.0.13
+ * @license Angular UI Tree v2.0.12
  * (c) 2010-2014. https://github.com/JimLiu/angular-ui-tree
  * License: MIT
  */
@@ -679,6 +679,10 @@
 
           };
 
+          callbacks.beforeDrop = function(event) {
+
+          };
+
           scope.$watch(attrs.uiTree, function(newVal, oldVal){
             angular.forEach(newVal, function(value, key){
               if (callbacks[key]) {
@@ -1064,6 +1068,9 @@
               e.preventDefault();
 
               if (dragElm) {
+                scope.$treeScope.$apply(function() {
+                  scope.$callbacks.beforeDrop(dragInfo.eventArgs(elements, pos));
+                });
                 // roll back elements changed
                 hiddenPlaceElm.replaceWith(scope.$element);
                 placeElm.remove();

diff --git a/dist/angular-ui-tree.min.js b/dist/angular-ui-tree.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Angular-NestedSortable",
-  "version": "2.0.12",
+  "version": "2.1.0",
   "dependencies": {
     "grunt": "~0.4.2",
     "grunt-contrib-jshint": "~0.8.0",

diff --git a/source/directives/uiTree.js b/source/directives/uiTree.js
@@ -79,6 +79,10 @@
 
           };
 
+          callbacks.beforeDrop = function(event) {
+
+          };
+
           scope.$watch(attrs.uiTree, function(newVal, oldVal){
             angular.forEach(newVal, function(value, key){
               if (callbacks[key]) {

diff --git a/source/directives/uiTreeNode.js b/source/directives/uiTreeNode.js
@@ -303,6 +303,9 @@
               e.preventDefault();
 
               if (dragElm) {
+                scope.$treeScope.$apply(function() {
+                  scope.$callbacks.beforeDrop(dragInfo.eventArgs(elements, pos));
+                });
                 // roll back elements changed
                 hiddenPlaceElm.replaceWith(scope.$element);
                 placeElm.remove();