Added Swap Items feature

update dependencies
tiberiuzuld · May 7, 2016 · 3fa4dcf · 3fa4dcf
1 parent 04c1a63
commit 3fa4dcf
Show file tree

Hide file tree

Showing 16 changed files with 3,321 additions and 2,621 deletions.
diff --git a/README.md b/README.md
@@ -106,7 +106,8 @@ $scope.options = {
      enabled: false, // enable/disable resizable items
      handles: ['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw'], // resizable edges of an item
      stop: undefined // callback when resizing an item stops. Arguments: gridsterItem, scope
-   }
+   },
+   swap: true
  };
 ```
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-gridster2",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": [
     "dist/gridster.js",
     "dist/gridster.css"
@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "angular-mocks": "~1.x",
-    "angular-material": "~1.0.7"
+    "angular-material": "~1.0.8"
   },
   "homepage": "https://github.io/tiberiuzuld/angular-gridster2",
   "bugs": {

diff --git a/dist/gridster.js b/dist/gridster.js
@@ -11,6 +11,46 @@
 
 })();
 
+(function () {
+  'use strict';
+
+  angular.module('angular-gridster2').factory('gridsterSwap', gridsterSwap);
+
+  /** @ngInject */
+  function gridsterSwap() {
+    function GridsterSwap(scope, elemPosition) {
+      var position = scope.gridster.pixelsToPosition(elemPosition[0], elemPosition[1]);
+      var x = scope.gridsterItem.x;
+      var y = scope.gridsterItem.y;
+      scope.gridsterItem.x = position[0];
+      scope.gridsterItem.y = position[1];
+      var swapItem = scope.gridster.findItemWithItem(scope.gridsterItem);
+      scope.gridsterItem.x = x;
+      scope.gridsterItem.y = y;
+      if (!swapItem) {
+        return;
+      }
+      x = swapItem.x;
+      y = swapItem.y;
+      swapItem.x = scope.gridsterItem.x;
+      swapItem.y = scope.gridsterItem.y;
+      scope.gridsterItem.x = position[0];
+      scope.gridsterItem.y = position[1];
+      if (scope.gridster.checkCollision(swapItem) || scope.gridster.checkCollision(scope.gridsterItem)) {
+        scope.gridsterItem.x = swapItem.x;
+        scope.gridsterItem.y = swapItem.y;
+        swapItem.x = x;
+        swapItem.y = y;
+      } else {
+        swapItem.setSize(true);
+        swapItem.checkItemChanges(swapItem, {x: x, y: y, cols: swapItem.cols, rows: swapItem.rows});
+      }
+    }
+
+    return GridsterSwap;
+  }
+})();
+
 (function () {
   'use strict';
 
@@ -537,11 +577,11 @@
 (function () {
   'use strict';
 
-  gridsterDraggable.$inject = ["$document", "gridsterScroll"];
+  gridsterDraggable.$inject = ["$document", "gridsterScroll", "gridsterSwap"];
   angular.module('angular-gridster2').factory('gridsterDraggable', gridsterDraggable);
 
   /** @ngInject */
-  function gridsterDraggable($document, gridsterScroll) {
+  function gridsterDraggable($document, gridsterScroll, gridsterSwap) {
 
     function GridsterDraggable($element, scope) {
 
@@ -600,6 +640,9 @@
       function dragStop(e) {
         e.preventDefault();
         e.stopPropagation();
+        if (scope.gridster.swap) {
+          gridsterSwap(scope, elemPosition);
+        }
         gridsterScroll.cancelScroll();
         $document[0].removeEventListener('mousemove', dragMove);
         $document[0].removeEventListener('mouseup', dragStop);
@@ -634,7 +677,6 @@
             scope.gridster.previewStyle();
           }
         }
-
       }
 
       this.toggle = function (enable) {
@@ -850,17 +892,20 @@
       if (!(item.y > -1 && item.x > -1 && item.cols + item.x <= vm.maxCols && item.rows + item.y <= vm.maxRows)) {
         return true;
       }
+      return vm.findItemWithItem(item);
+    };
+
+    vm.findItemWithItem = function (item) {
       var widgetsIndex = vm.grid.length - 1, widget;
       for (; widgetsIndex >= 0; widgetsIndex--) {
         widget = vm.grid[widgetsIndex];
         if (widget !== item && widget.x < item.x + item.cols && widget.x + widget.cols > item.x &&
           widget.y < item.y + item.rows && widget.y + widget.rows > item.y) {
-          return true;
+          return widget;
         }
       }
     };
 
-
     vm.autoPositionItem = function (item) {
       setGridDimensions();
       var rowsIndex = 0, colsIndex;
@@ -891,7 +936,7 @@
         y -= 10;
       }
 
-      return [Math.round(x / vm.curColWidth), Math.round(y / vm.curRowHeight)];
+      return [Math.abs(Math.round(x / vm.curColWidth)), Math.abs(Math.round(y / vm.curRowHeight))];
     }
   }
 })();
@@ -926,6 +971,7 @@
         enabled: false, // enable/disable resizable items
         handles: ['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw'], // resizable edges of an item
         stop: undefined // callback when resizing an item stops. Arguments: gridsterItem, scope
-      }
+      },
+      swap: true
     });
 })();
diff --git a/dist/index.html b/dist/index.html
@@ -32,6 +32,9 @@
       <md-option value="scrollVertical">Scroll Vertical</md-option>
       <md-option value="scrollHorizontal">Scroll Horizontal</md-option>
     </md-select>
+    <md-checkbox ng-model="vm.options.swap">
+      Swap Items
+    </md-checkbox>
     <md-checkbox ng-model="vm.options.draggable.enabled">
       Drag Items
     </md-checkbox>

diff --git a/dist/scripts/app.js b/dist/scripts/app.js
@@ -25,7 +25,8 @@
       resizable: {
         enabled: true,
         stop: eventStop
-      }
+      },
+      swap: true
     };
     vm.dashboard = [
       {cols: 2, rows: 1, y: 0, x: 0},