packery with drag & drop

js/main.coffee

@@ -1,5 +1,3 @@
-Packery = require('packery')
-
 jQuery(document).ready(() ->
   jQuery("#masonryslide-container").hide()
 )
@@ -10,37 +8,36 @@ jQuery(document).on('click', '#pack', () ->
   jQuery("#masonryslide").width(container.width() - 100)
   jQuery("#masonryslide").height(container.height() - 300)
 
-  promise = Promise.resolve()
   slide = document.getElementById('masonryslide')
-  grid = new Packery(slide, {
+  slide.innerHTML = ""
-    itemSelector: "img"
+  grid = jQuery(slide).packery({
-    percentPosition: true
+    itemSelector: ".grid-item"
-    columnWidth: 100
+    columnWidth: 400
   })
   for file in document.getElementById('masonryslide-files').files
     img = document.createElement("img")
     img.classList.add("obj")
     img.file = file
-    jQuery("#masonryslide")[0].append(img)
 
     fr = new FileReader()
     fr.onload = ((aImg) ->
       (e) ->
         aImg.src = e.target.result
-        if jQuery(aImg).width() > (jQuery("#masonryslide").width() / 3)
+        d = jQuery("<div class='grid-item'></div>")
-          jQuery(aImg).width("33%")
+        d.append(aImg)
-        grid.layout()
+        grid.append(d)
-        resolve()
+        grid.packery('layout')
+        jQuery(document).trigger("masonryloadedImg")
     )(img)
     fr.readAsDataURL(file)
 
-  promise.then(() ->
+  jQuery(document).on("masonryloadedImg", () ->
-    items = jQuery(slide).find('img').draggable()
+    items = jQuery('#masonryslide .grid-item')
-    grid.bindUIDraggableEvents(items)
+    if items.length == document.getElementById('masonryslide-files').files.length
+      items.draggable()
+      jQuery("#masonryslide").packery('bindUIDraggableEvents', items).packery('layout')
   )
 )
 
 jQuery("#pngdownload").click(() ->
-  canvas = document.getElementById("masonryslide")
-  document.location.href = canvas.toDataUrl("image/png")
 )

main.css

@@ -0,0 +1,25 @@
+/* jQuery UI Draggable adds ui-draggable-dragging */
+.grid-item.ui-draggable-dragging,
+/* Packery adds class while transitioning to drop position */
+.grid-item.is-positioning-post-drag {
+  background: #C90;
+  z-index: 2; /* keep dragged item on top */
+}
+.packery-drop-placeholder {
+  outline: 3px dashed #444;
+  outline-offset: -6px;
+  /* transition position changing */
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+}
+.grid-item {
+  float: left;
+  max-width: 390px;
+  margin: 5px;
+}
+.grid-item img {
+  max-width: 100%;
+}
+.grid-item:hover {
+  cursor: move;
+}

masonry.php

@@ -33,10 +33,15 @@ function masonryslides_js($hook) {
     'masonryslides_libcss',
     plugins_url('main.css', __FILE__)
   );
+  wp_enqueue_script(
+    'packery',
+    'https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js',
+    ['jquery']
+  );
   wp_enqueue_script(
     'masonryslides_js',
     plugins_url('dist/main.js', __FILE__),
-    ['jquery', 'jquery-ui-core', 'jquery-ui-draggable']
+    ['jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'packery']
   );
 }
 
@@ -49,7 +54,7 @@ function masonryslides_newslide() {
 <p><button id="pack">Pack the images</button></p>
 <div id="masonryslide-container">
   <div id="masonryslide"></div>
-  <p>
+  <p class="clear">
     <button id="pngdownload">Download as PNG</button>
     <button id="pdfdownload">Download as PDF</button>
     <button id="pptdownload">Download as PPT</button>

package.json

@@ -2,7 +2,6 @@
   "dependencies": {
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.0.2",
-    "packery": "^2.1.1",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "webpack": "^3.8.1"
   }