examples source link moved to top of page

Author: gmsa

website/docs/.vuepress/components/Example09DynamicAddRemove.vue

@@ -1,5 +1,13 @@
 <template>
     <div>
+        <div class="layoutJSON">
+            Displayed as <code>[x, y, w, h]</code>:
+            <div class="columns">
+                <div class="layoutItem" v-for="item in layout" :key="item.i">
+                    <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                </div>
+            </div>
+        </div>
         <button @click="addItem">Add an item dynamically</button>
         <input type="checkbox" v-model="draggable" /> Draggable
         <input type="checkbox" v-model="resizable" /> Resizable
@@ -50,7 +58,7 @@ export default {
         }
     },
     mounted() {
-        this.$gridlayout.load();
+        // this.$gridlayout.load();
         this.index = this.layout.length;
     },
     methods: {
@@ -67,13 +75,29 @@ export default {
             this.index++;
         },
         removeItem: function (val) {
-            this.layout = this.layout.filter((item) => item.i !== val);
+            const index = this.layout.map(item => item.i).indexOf(val);
+            this.layout.splice(index, 1);
         },
     }
 }
 </script>
 
-<style scoped>
+<style>
+.layoutJSON {
+    background: #ddd;
+    border: 1px solid black;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.columns {
+    -moz-columns: 120px;
+    -webkit-columns: 120px;
+    columns: 120px;
+}
+
+/*************************************/
+
 .remove {
     position: absolute;
     right: 2px;

website/docs/.vuepress/public/examples/09-dynamic-add-remove.js

@@ -40,7 +40,8 @@ new Vue({
       this.index++;
     },
     removeItem: function (val) {
-      this.layout = this.layout.filter((item) => item.i !== val);
+      const index = this.layout.map(item => item.i).indexOf(val);
+      this.layout.splice(index, 1);
     },
   },
 });

website/docs/guide/01-basic.md

@@ -1,7 +1,8 @@
 # 01 - Basic 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example01Basic.vue)
+
 <ClientOnly>
 <Example01Basic></Example01Basic>
 </ClientOnly>
 
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example01Basic.vue)

website/docs/guide/02-events.md

@@ -1,7 +1,7 @@
 # 02 - Move and resize events 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example02Events.vue)
+
 <ClientOnly>
 <Example02Events></Example02Events>
 </ClientOnly>
-
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example02Events.vue)

website/docs/guide/03-multiple-grids.md

@@ -1,7 +1,8 @@
 # 03 - Multiple grids 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example03MultipleGrids.vue)
+
 <ClientOnly>
 <Example03MultipleGrids></Example03MultipleGrids>
 </ClientOnly>
 
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example03MultipleGrids.vue)

website/docs/guide/04-allow-ignore.md

@@ -4,8 +4,9 @@ Ignore drag on certain elements and allow on others.
 
 Click and drag the dots on the corner of each item to reposition
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example04AllowIgnore.vue)
+
 <ClientOnly>
 <Example04AllowIgnore></Example04AllowIgnore>
 </ClientOnly>
 
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example04AllowIgnore.vue)

website/docs/guide/05-mirrored.md

@@ -1,7 +1,8 @@
 # 05 - Mirrored grid layout 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example05Mirrored.vue)
+
 <ClientOnly>
 <Example05Mirrored></Example05Mirrored>
 </ClientOnly>
 
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example05Mirrored.vue)

website/docs/guide/06-responsive.md

@@ -1,8 +1,9 @@
 # 06 - Responsive 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example06Responsive.vue)
+
 <ClientOnly>
-<iframe style="border:0;width: 100%;height:3000px;" src="../examples/06-responsive.html"></iframe>
-<!--Example06Responsive></Example06Responsive-->
+<!--iframe style="border:0;width: 100%;height:3000px;" src="../examples/06-responsive.html"></iframe-->
+<Example06Responsive></Example06Responsive>
 </ClientOnly>
 
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example06Responsive.vue)

website/docs/guide/07-prevent-collision.md

@@ -1,8 +1,8 @@
 # 07 - Prevent Collision 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example07PreventCollision.vue)
+
 <ClientOnly>
 <!--iframe style="border:0;width: 100%;height:1000px;" src="../examples/07-prevent-collision.html"></iframe-->
 <Example07PreventCollision></Example07PreventCollision>
 </ClientOnly>
-
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example07PreventCollision.vue)

website/docs/guide/08-responsive-predefined-layouts.md

@@ -1,7 +1,7 @@
 # 08 - Responsive with predefined layouts 
 
+[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue)
+
 <ClientOnly>
 <Example08ResponsivePredefinedLayouts></Example08ResponsivePredefinedLayouts>
 </ClientOnly>
-
-[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue)