https://github.com/chriskempson/panelsort

A jQuery plugin for sorting elements through a dynamically generated overview panel
https://github.com/chriskempson/panelsort

Last synced: about 2 months ago
JSON representation

A jQuery plugin for sorting elements through a dynamically generated overview panel

• Host: GitHub
• URL: https://github.com/chriskempson/panelsort
• Owner: chriskempson
• Created: 2011-11-03T10:05:50.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2011-11-09T22:31:15.000Z (about 13 years ago)
• Last Synced: 2023-03-11T22:57:33.638Z (almost 2 years ago)
• Language: JavaScript
• Homepage: panelsort.chriskempson.com
• Size: 148 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Panelsort

A jQuery plugin for sorting elements through a dynamically generated overview panel. This plugin was written to address the issue of sortable elements with large content. Elements become difficult to sort if they have a large amount of content due to the fact that they may extend past the currently viewable portion of a website. A panel with a representation of the sortable elements resolves this issue.

## Example Usage

A simple example with a single column and three sortable items.

    


    


      


        


          
Lorem ipsum dolor sit amet

        

        


          
Lorem ipsum dolor sit amet

        

        


          
Lorem ipsum dolor sit amet

        

      

    

    

    

      $(document).ready(function() {

        $("#ps-panel").panelsort();

      });

    

    

# Static Items

If you would like to make an item static, use the class `ps-static-item` instead of `ps-item`.


# Popup

This plugin works well inside a popup div. An example of doing this with [jQueryUI Dialog](http://jqueryui.com/demos/dialog/) is as follows:

      $("#ps-panel").dialog({

        create: function(event, ui) {

          $(this).panelsort({

            sortableSettings: {

            helper: 'clone',

            appendTo: 'body',

            zIndex: 1100

          });

        }

      });

# Config Options

The plugin is setup with the following defaults. Feel free to override them if you wish. Also, note that you can set your own settings for [jQueryUI Sortable](http://jqueryui.com/demos/sortable/) and [jQuery Cookie](https://github.com/carhartl/jquery-cookie) with `sortableSettings` and `cookieSettings`.

    {

      containerElement: '#ps-items',

      columnClass: 'ps-column',

      itemClass: 'ps-item',

      staticItemClass: 'ps-static-item',

      titleClass: 'ps-title',

      cookieName: 'panelsort',

      sortableSettings: {

        opacity: 0.8,

        forcePlaceholderSize: true,

        revert: 200,

        placeholder: 'ps-panel-placeholder'

      },

      cookieSettings: {

        expires: 1826 // 5 Years

      }

    }