Randomly placed draggable divs - organize/sort function?

Question

Currently I have a page which on load scatters draggable divs randomly over a page using math.random

Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.

I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!

If anyone could at the very least point me in the right direction i would be extremely thankful!!

Answer 1

Hopefully this gives you a bit of a starting point.

I would read up on JQuery as it has some useful helpers for DOM manipulation. I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.

Firstly I've added a button to trigger the sort

<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>

Then updated the script to override the css setting to switch between draggable view and item view.

// general wait for jquery syntax
$(function(){

      // trigger the layour to sort get the packery container
  var container = document.querySelector('#container.packery');
  var pckry = new Packery( container );
  //button function
  $("#sort").click(function(){
    //Hide all the dragged divs
    //ui-helper-hidden is a jquery ui hider class
    if($('.box').css('display') == 'block') {
      $('.box').css({'display':'none'});
      //Show all the item class's
      $('.item').css({'display':'block'});
      //show the container
      $('#container').css({'display':'block'});
      // trigger the layour to sort
       pckry.layout();
    } else {
      //hide all the item class's
      $('.item').css({'display':'none'});
      //hide the container
      $('#container').css({'display':'none'});  
      //show the draggable box's
      $('.box').css({'display':'block'});    
    }
  });

  $( ".pstn" ).draggable({ scroll: false });

  $(".pstn").each(function(i,el){

      var tLeft = Math.floor(Math.random()*1000),
          tTop  = Math.floor(Math.random()*1000);

      $(el).css({position:'absolute', left: tLeft, top: tTop});

  });

});

As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.

I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.