Git Product home page Git Product logo

nestable's Introduction

Nestable

Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)

Try Nestable Demo

Usage

Write your nested HTML lists like so:

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

Then activate with jQuery like so:

$('.dd').nestable({ /* config options */ });

Events

The change event is fired when items are reordered.

$('.dd').on('change', function() {
    /* on change event */
});

Methods

You can get a serialised object with all data-* attributes for each item.

$('.dd').nestable('serialize');

The serialised JSON for the example above would be:

[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

Configuration

You can change the follow options:

  • maxDepth number of levels an item can be nested (default 5)
  • group group ID to allow dragging between lists (default 0)

These advanced config options are also available:

  • listNodeName The HTML element to create for lists (default 'ol')
  • itemNodeName The HTML element to create for list items (default 'li')
  • rootClass The class of the root element .nestable() was used on (default 'dd')
  • listClass The class of all list elements (default 'dd-list')
  • itemClass The class of all list item elements (default 'dd-item')
  • dragClass The class applied to the list element that is being dragged (default 'dd-dragel')
  • handleClass The class of the content element inside each list item (default 'dd-handle')
  • collapsedClass The class applied to lists that have been collapsed (default 'dd-collapsed')
  • placeClass The class of the placeholder element (default 'dd-placeholder')
  • emptyClass The class used for empty list placeholder elements (default 'dd-empty')
  • expandBtnHTML The HTML text used to generate a list item expand button (default '<button data-action="expand">Expand></button>')
  • collapseBtnHTML The HTML text used to generate a list item collapse button (default '<button data-action="collapse">Collapse</button>')

Inspect the Nestable Demo for guidance.

Change Log

15th October 2012

  • Merge for Zepto.js support
  • Merge fix for remove/detach items

27th June 2012

  • Added maxDepth option (default to 5)
  • Added empty placeholder
  • Updated CSS class structure with options for listClass and itemClass.
  • Fixed to allow drag and drop between multiple Nestable instances (off by default).
  • Added group option to enabled the above.

Author: David Bushell http://dbushell.com @dbushell

Copyright © 2012 David Bushell | BSD & MIT license

nestable's People

Contributors

dbushell avatar hakoniemi avatar jails avatar johnsardine avatar nate-strauser avatar zgldh avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.