search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.04k stars 1.2k forks source link

How to auto sort by size in gridster? #491

Open TheInvoker opened 9 years ago

TheInvoker commented 9 years ago

I am using the gridster jquery plugin, and it would be great if there is a way to auto-sort the boxes. This is my current code:

          <div class="gridster">
            <ul>
              <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
              <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"></li>
              <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"></li>
              <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
              <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
              <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"></li>
              <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"></li>
              <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"></li>
              <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
              <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"></li>
              <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"></li>
              <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
            </ul>
          </div>

JS

    var gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 100],
        widget_margins: [5, 5],
        helper: 'clone'
    }).data('gridster').disable();

    // resize widgets on hover
    gridster.$el.on('mouseenter', '> li', function() {
        gridster.resize_widget($(this), 3, 3);
    }).on('mouseleave', '> li', function() {
        gridster.resize_widget($(this), 1, 1);
    });

If I view it on my phone, and I click a box to the right, it expands, but then most of it goes off screen and I can't see it, also there is no horizontal scroll bar. Basically what I want, is that when you click something and it expands, the grid should auto sort itself so the bigger elements are in the top left corner, and the smaller ones are in the bottom right.

Does anyone know if there is a way to do this?

Thanks