TypeScript

by mnk

HTML

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script src="https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item grid-item--width2">1</div>
  <div class="grid-item grid-item--height2">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item grid-item--width2 grid-item--height2">5</div>
  <div class="grid-item grid-item--width2">6</div>
  <div class="grid-item grid-item--width2">7</div>
  <div class="grid-item grid-item--height2">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item grid-item--width2">10</div>
  <div class="grid-item grid-item--height2">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item grid-item--width2 grid-item--height2">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item grid-item--width2">16</div>
  <div class="grid-item grid-item--height2">17</div>
  <div class="grid-item">18</div>
</div>

CSS

* { box-sizing: border-box; } 

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* ---- .grid-item ---- */

.grid-item {
  width: 100px;
  height: 100px;
  background: #909090;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item--width2 { width: 210px; }
.grid-item--height2 { height: 210px; }

.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
  opacity: 0.9;
  z-index: 2;
}

.packery-drop-placeholder {
  /*outline: 3px dashed hsla(0, 0%, 0%, 0.5);
  outline-offset: -6px;*/
  border-radius: 5px;
  background-color: black;
  opacity: 0.2;
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}

TypeScript

// external js: packery.pkgd.js, draggabilly.pkgd.js

const $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100,
  gutter: 10,
});

// make all grid-items draggable
$grid.find('.grid-item').each( function(i, gridItem) {
  const draggie = new Draggabilly(gridItem);
  // bind drag events to Packery
  $grid.packery('bindDraggabillyEvents', draggie);
});