title: Trouble making jQuery plugin 'jquery.shuffle.js' perform a sort
body: <p>I'm trying to use a jQuery plugin called shuffle.js which is supposed to work similar to Isotope - it can shuffle around divs on a page. It creates a pretty neat effect. 
  (See <a href="http://vestride.github.io/Shuffle/" rel="nofollow">http://vestride.github.io/Shuffle/</a>)</p>
  
  <p>I can't get it to sort. I've studied the docs and can find what I'm doing wrong. 
  Test page is here:
  <a href="http://res.providencejournal.com/politics/assets/pages/general-assembly/shuffle.htm" rel="nofollow">http://res.providencejournal.com/politics/assets/pages/general-assembly/shuffle.htm</a></p>
  
  <p>The sort is supposed to happen when you make a change to the drop down menu above the first row.</p>
  
  <pre><code> &lt;!doctype html&gt;
   &lt;head&gt;
  
  &lt;!-- css --&gt;
  &lt;style&gt;
      body {
      font-family:arial;
      }
  
      #container {width: 960px; margin: 0 auto;}
  
      /* grid */
      #grid {clear: both; position: relative}
      .item {width: 75px; height: 155px; background: #EEEEEE;font-size: 10px;margin-bottom:10px; text-align: center;}
  
      .item img {
      width:75px;
      }
  
      .last_name {
      display:none;
  
      }
  
  &lt;/style&gt;
  
  &lt;!-- javascript --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="jquery.shuffle.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
  
          /* initialize shuffle plugin */
          var $grid = $('#grid');
  
          $grid.shuffle({
              itemSelector: '.item', // the selector for the items in the grid
              gutterWidth: 10
          });
  
  
          // Sorting options
          $('.sort-options').on('change', function() {
           var sort = this.value,
               opts = {};
  
           // We're given the item wrapped in jQuery
           if ( sort === 'data-party' ) {
              opts = {
               reverse: true,
               by: function($el) {
                  return $el.data('data-party');
               }
              };
           } else if ( sort === 'data-district' ) {
              opts = {
               by: function($el) {
                  return $el.data('data-district');
               }
              };
           } else if ( sort === 'data-last_name' ) {
              opts = {
               by: function($el) {
                  return $el.data('data-last_name');
               }
              };
           }
  
           // Filter items
           $grid.shuffle('sort', opts);
          });
  
  
      });
  &lt;/script&gt;
  
   &lt;/head&gt;
  
   &lt;body&gt;
  
  &lt;!-- #container --&gt;
  &lt;div id="container"&gt;
  
      &lt;select class="sort-options"&gt;
       &lt;option value=""&gt;Default&lt;/option&gt;
       &lt;option value="data-district"&gt;District&lt;/option&gt;
       &lt;option value="data-last_name"&gt;Last name&lt;/option&gt;
       &lt;option value="data-party"&gt;Party&lt;/option&gt;
      &lt;/select&gt;
  
     &lt;!-- just show two items. Actual test page has about 60 --&gt;
  
          &lt;div id="grid"&gt;
              &lt;div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Abney" data-district="73"&gt;
                 &lt;img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_marvin_l_abney.jpg"&gt;&lt;br&gt;
                 &lt;div class="name"&gt;Rep. Marvin L. Abney&lt;/div&gt;
                 &lt;div class="last_name"&gt;Abney&lt;/div&gt;
                 &lt;span class="party"&gt;(D-&lt;/span&gt;&lt;span class="district"&gt;73)&lt;/span&gt;
              &lt;/div&gt;
              &lt;div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Ackerman" data-district="45"&gt;
                 &lt;img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_mia_a_ackerman.jpg"&gt;&lt;br&gt;
                 &lt;div class="name"&gt;Rep. Mia A. Ackerman&lt;/div&gt;
                 &lt;div class="last_name"&gt;Ackerman&lt;/div&gt;
                 &lt;span class="party"&gt;(D-&lt;/span&gt;&lt;span class="district"&gt;45)&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /#container --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Firebug indicates that the event is firing but the divs don't move. Any help would be appreciated!</p>