Draggable Cats

by Alen Subasic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue-grid-layout@2/dist/vue-grid-layout.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div id="app">
  <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="false" :is-mirrored="false" :vertical-compact="true" :margin="[15,15]" :use-css-transforms="true">

    <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" drag-allow-from=".draggable">
      <img :src="item.url + item.i" style="width:100%;"/>
      <span class="draggable"><i class="fas fa-arrows-alt"></i></span>
    </grid-item>
  </grid-layout>
</div>

CSS

.vue-grid-layout {
  background: #eee;
}

.vue-grid-item.vue-grid-placeholder {
  border-radius: 4px;
  background: tomato;
  filter: blur(4px);
  opacity: 0.5;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border-radius: 4px;
  border: 1px solid black;
  text-align: center;
  font-size: 26px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.draggable {
	color: #555;
  position: absolute;
  bottom: 0;
  right: 0;
}

Vue

var testLayout = [
	{"x":0,"y":0,"w":2,"h":4,"i":"0", "url": "https://loremflickr.com/320/240?random="},
	{"x":2,"y":0,"w":2,"h":4,"i":"1", "url": "https://loremflickr.com/320/240?random="},
	{"x":4,"y":0,"w":2,"h":5,"i":"2", "url": "https://loremflickr.com/320/240?random="},
	{"x":6,"y":0,"w":2,"h":3,"i":"3",	"url": "https://loremflickr.com/320/240?random="},
	{"x":8,"y":0,"w":2,"h":3,"i":"4",	"url": "https://loremflickr.com/320/240?random="},
	{"x":10,"y":0,"w":2,"h":3,"i":"5", "url": "https://loremflickr.com/320/240?random="},
	{"x":0,"y":5,"w":2,"h":5,"i":"6",	"url": "https://loremflickr.com/320/240?random="},
	{"x":2,"y":5,"w":2,"h":5,"i":"7",	"url": "https://loremflickr.com/320/240?random="}
];

new Vue({
	el: '#app',
	data: {
		layout: testLayout
	},
});