testing with vue-dragula and interact.js

Author: gmsa

examples/app.css

@@ -22,8 +22,6 @@
 
 
 /******* DRAG AND DROP *******/
-
-/*
 .gu-mirror {
     position: fixed !important;
     margin: 0 !important;
@@ -46,43 +44,3 @@
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
     filter: alpha(opacity=20);
 }
-*/
-/*
- * note that styling gu-mirror directly is a bad practice because it's too generic.
- * you're better off giving the draggable elements a unique class and styling that directly!
- */
-/*
-.container div,
-.gu-mirror {
-    !*padding: 10px;*!
-    background-color: rgba(0, 0, 0, 0.2);
-    transition: opacity 0.4s ease-in-out;
-}
-.container div {
-    cursor: move;
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    !*margin-bottom: 10px;*!
-}
-.container div:last-child {
-    !*margin-bottom: 0;*!
-}
-.gu-mirror {
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-}
-.container .ex-moved {
-    background-color: #e74c3c;
-}
-.container.ex-over {
-    background-color: rgba(255, 255, 255, 0.3);
-}
-.handle {
-    !*padding: 0 5px;*!
-    !*margin-right: 5px;*!
-    background-color: rgba(0, 0, 0, 0.4);
-    cursor: move;
-}
-*/

index.html

@@ -45,7 +45,7 @@ <h1>Vue Grid Layout</h1>
                     <button @click="removeItem(item)">REMOVE {{item.i}}</button>
                 </grid-item>
             </responsive-grid-layout>-->
-            <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
+            <grid-layout :layout.sync="layout" :col-num="12" :is-draggable="true">
                 <grid-item v-for="item in layout"
                            :x.sync="item.x"
                            :y.sync="item.y"

package.json

@@ -42,6 +42,8 @@
     "vue-html-loader": "^1.2.2",
     "vue-style-loader": "^1.0.0",
     "vue-loader": "^8.5.2",
+    "vue-dragula": "^1.0.4",
+    "interact.js": "^1.2.6",
     "lodash": "^4.13.1",
     "element-resize-detector": "^1.1.3",
     "webpack": "^1.13.1",