Color dragged item yellow

example/src/ExampleAOverlay.vue

@@ -154,7 +154,7 @@ export default {
       @containerDragEnd="handleContainerDrag($event, 'end')"
     >
       <template #item="{ rawItem }">
-        <div :class="{ container: true, disabled: rawItem.disabled }">
+        <div :class="{ container: true, disabled: rawItem.disabled, dragged: dragged[rawItem.key] }">
           <span>{{ rawItem.data.name }}</span>
         </div>
       </template>
@@ -186,7 +186,7 @@ export default {
       @containerDragEnd="handleContainerDrag($event, 'end')"
     >
       <template #item="{ rawItem }">
-        <div :class="{ container: true, disabled: rawItem.disabled }">
+        <div :class="{ container: true, disabled: rawItem.disabled, dragged: dragged[rawItem.key] }">
           <span>{{ rawItem.data.name }}</span>
         </div>
       </template>
@@ -253,6 +253,44 @@ div {
 .container.goal {
   background: #2ecc71;
   box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+  animation: breathe 2s infinite;
+}
+
+@keyframes breathe {
+  0% {
+    background: #2ecc71;
+    box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+  }
+  50% {
+    background: #a3d9a5;
+    box-shadow: #2ecc71 0.1em 0.1em 0 0.1em;
+  }
+  100% {
+    background: #2ecc71;
+    box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+  }
+}
+
+.container.dragged {
+  animation: glare 2s infinite;
+  color: #222;
+  background: #f1c40f;
+  box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+}
+
+@keyframes glare {
+  0% {
+    background: #f1c40f;
+    box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+  }
+  50% {
+    background: #f7dd73;
+    box-shadow: #f1c40f 0.1em 0.1em 0 0.1em;
+  }
+  100% {
+    background: #f1c40f;
+    box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+  }
 }
 
 button {