增加float选项，允许 vue-grid-layout-item 浮动在固定位置

.gitignore

@@ -25,3 +25,4 @@ yarn.lock
 yarn-error.log
 
 website/docs/dist
+website/public/

src/App.vue

@@ -62,6 +62,7 @@
                            :w="item.w"
                            :h="item.h"
                            :i="item.i"
+                           :float="item.float"
                            :min-w="item.minW"
                            :max-w="item.maxW"
                            :min-x="item.minX"
@@ -118,7 +119,7 @@
     //var eventBus = require('./eventBus');
 
     let testLayout = [
-        {"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2},
+        {"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2,float:true},
         {"x":2,"y":0,"w":2,"h":4,"i":"1", resizable: null, draggable: null, static: true},
         {"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false, static: false, minX: 4, maxX: 4, minW: 2, maxW: 2, preserveAspectRatio: true},
         {"x":6,"y":0,"w":2,"h":3,"i":"3", resizable: false, draggable: false, static: false},
@@ -216,18 +217,22 @@
                 this.index++;
                 this.layout.push(item);
             },
+            // 移动的过程中触发
             move: function(i, newX, newY){
                 console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
             },
             resize: function(i, newH, newW, newHPx, newWPx){
                 console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },
+            // 移动结束触发
             moved: function(i, newX, newY){
                 console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
             },
+            // grid item 大小变化时触发
             resized: function(i, newH, newW, newHPx, newWPx){
                 console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },
+            // grid layout 大小变化时触发
             containerResized: function(i, newH, newW, newHPx, newWPx){
                 console.log("### CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },

src/components/GridItem.vue

@@ -84,6 +84,9 @@
     .vue-grid-item.disable-userselect {
         user-select: none;
     }
+    .vue-grid-item.float{
+        z-index: 1;
+    }
 </style>
 <script>
     import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '@/helpers/utils';
@@ -123,6 +126,12 @@
              type: Number,
              required: true
              },*/
+            //  是否浮层
+            float: {
+                type: Boolean,
+                required: false,
+                default: false
+            },
             isDraggable: {
                 type: Boolean,
                 required: false,
@@ -197,6 +206,7 @@
                 required: false,
                 default: 'a, button'
             },
+            // 是否保持纵横比
             preserveAspectRatio: {
                 type: Boolean,
                 required: false,
@@ -410,6 +420,7 @@
         computed: {
             classObj() {
                 return {
+                    'float':this.float,
                     'vue-resizable' : this.resizableAndNotStatic,
                     'static': this.static,
                     'resizing' : this.isResizing,
@@ -576,6 +587,7 @@
                 if (event.type === "resizeend" && (this.previousW !== this.innerW || this.previousH !== this.innerH)) {
                     this.$emit("resized", this.i, pos.h, pos.w, newSize.height, newSize.width);
                 }
+                 // TODO:
                 this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w);
             },
             handleDrag(event) {
@@ -659,6 +671,7 @@
                 if (event.type === "dragend" && (this.previousX !== this.innerX || this.previousY !== this.innerY)) {
                     this.$emit("moved", this.i, pos.x, pos.y);
                 }
+                // TODO: 
                 this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.innerH, this.innerW);
             },
             calcPosition: function (x, y, w, h) {
@@ -758,6 +771,7 @@
             compact: function () {
                 this.createStyle();
             },
+            //开始监听拖拽事件
             tryMakeDraggable: function(){
                 const self = this;
                 if (this.interactObj === null || this.interactObj === undefined) {
@@ -771,7 +785,7 @@
                         ignoreFrom: this.dragIgnoreFrom,
                         allowFrom: this.dragAllowFrom
                     };
-                    this.interactObj.draggable(opts);
+                    this.interactObj.draggable(opts);//设置为可拖拽
                     /*this.interactObj.draggable({allowFrom: '.vue-draggable-handle'});*/
                     if (!this.dragEventSet) {
                         this.dragEventSet = true;
@@ -785,6 +799,7 @@
                     });
                 }
             },
+            //开始监听resize
             tryMakeResizable: function(){
                 const self = this;
                 if (this.interactObj === null || this.interactObj === undefined) {
@@ -878,6 +893,7 @@
                 }
                 if (this.previousW !== pos.w || this.previousH !== pos.h) {
                     this.$emit("resized", this.i, pos.h, pos.w, newSize.height, newSize.width);
+                    // TODO:
                     this.eventBus.$emit("resizeEvent", "resizeend", this.i, this.innerX, this.innerY, pos.h, pos.w);
                 }
             }

src/components/GridLayout.vue

@@ -1,6 +1,7 @@
 <template>
     <div ref="item" class="vue-grid-layout" :style="mergedStyle">
         <slot></slot>
+        <!-- 拖拽的时候显示的占位item -->
         <grid-item class="vue-grid-placeholder"
                    v-show="isDragging"
                    :x="placeholder.x"
@@ -332,9 +333,9 @@
                     });
                 }
 
-                // Move the element to the dragged location.
+                // Move the element to the dragged location. TODO: 将元素移动到拖动的位置
                 this.layout = moveElement(this.layout, l, x, y, true, this.preventCollision);
-                compact(this.layout, this.verticalCompact);
+                if(!l.float)compact(this.layout, this.verticalCompact);//垂直方向压缩
                 // needed because vue can't detect changes on array element properties
                 this.eventBus.$emit("compact");
                 this.updateHeight();

src/helpers/utils.js

@@ -88,8 +88,8 @@ export function compact(layout: Layout, verticalCompact: Boolean): Layout {
   for (let i = 0, len = sorted.length; i < len; i++) {
     let l = sorted[i];
 
-    // Don't move static elements
-    if (!l.static) {
+    // Don't move static elements  不移动float元素
+    if (!l.static && !l.float) {
       l = compactItem(compareWith, l, verticalCompact);
 
       // Add to comparison array. We only collide with items before this one.
@@ -207,11 +207,11 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
  *                                     being dragged/resized by th euser.
  */
 export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number, isUserAction: Boolean, preventCollision: Boolean): Layout {
-  if (l.static) return layout;
+  if (l.static) return layout;//如果节点是静态节点，退出函数
 
   // Short-circuit if nothing to do.
   //if (l.y === y && l.x === x) return layout;
-
+// 旧的位置
   const oldX = l.x;
   const oldY = l.y;
 
@@ -220,7 +220,7 @@ export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number,
   if (typeof x === 'number') l.x = x;
   if (typeof y === 'number') l.y = y;
   l.moved = true;
-
+  if(l.float) return layout;
   // If this collides with anything, move it.
   // When doing this comparison, we have to sort the items we compare with
   // to ensure, in the case of multiple collisions, that we're getting the
@@ -251,7 +251,7 @@ export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number,
     if (collision.static) {
       layout = moveElementAwayFromCollision(layout, collision, l, isUserAction);
     } else {
-      layout = moveElementAwayFromCollision(layout, l, collision, isUserAction);
+      layout =collision.float ? layout : moveElementAwayFromCollision(layout, l, collision, isUserAction);
     }
   }
 
@@ -261,10 +261,12 @@ export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number,
 /**
  * This is where the magic needs to happen - given a collision, move an element away from the collision.
  * We attempt to move it up if there's room, otherwise it goes below.
- *
- * @param  {Array} layout            Full layout to modify.
- * @param  {LayoutItem} collidesWith Layout item we're colliding with.
- * @param  {LayoutItem} itemToMove   Layout item we're moving.
+ * 
+ *这就是魔法需要发生的地方——给定一个碰撞，将一个元素从碰撞中移开。
+*如果有空间的话，我们试着把它往上移动，否则它就在下面。
+ * @param  {Array} layout            Full layout to modify. 整个要修改的layout
+ * @param  {LayoutItem} collidesWith Layout item we're colliding with. 给定的碰撞item
+ * @param  {LayoutItem} itemToMove   Layout item we're moving. 我们要移开的item
  * @param  {Boolean} [isUserAction]  If true, designates that the item we're moving is being dragged/resized
  *                                   by the user.
  */