Merge pull request #12 from oslabs-beta/keyla/dragAndDrop

Keyla/drag and drop

Author: JaceCrowe

src/components/left-sidebar/ComponentTab/CreateMenuHTMLQueue.vue

@@ -169,11 +169,12 @@ li {
   height: 35px;
   padding-top: 6px;
   text-align: center;
+  cursor: move;
 }
 
 .list-group-item-selected {
   display: inline-block;
-  margin: 2px 1.5%;
+  margin: 4px 1.5%;
   min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
@@ -182,6 +183,7 @@ li {
   height: 35px;
   padding-top: 6px;
   text-align: center;
+  cursor: move;
 }
 
 .fa-trash:hover {
@@ -224,4 +226,12 @@ li {
 hr {
   border: 1px solid grey
 }
+
+.currentlyDragging {
+  opacity: .5;
+}
+
+.ignoreByDragover {
+  pointer-events: none;
+}
 </style>

src/components/right-sidebar/CodeSnippet.vue

@@ -74,7 +74,7 @@ export default {
     // Creates beginner boilerplate
     createTemplate(componentName) {
       let templateTagStr = this.writeTemplateTag(componentName);
-      
+
       //if/else statement to determine if there are class and id attributes present in the html element
       if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id !== "") {
         return `<template>\n  <div id = "${this.activeComponentObj.htmlAttributes.id}" class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;

src/components/right-sidebar/HTMLQueue.vue

@@ -331,8 +331,6 @@ hr {
 }
 
 
-
-
 .AttributeBox {
   background-color: $subsecondary;
   color: $menutext;