Home

Awesome

knockout-sortable is a binding for Knockout.js designed to connect observableArrays with jQuery UI's sortable functionality. This allows a user to drag and drop items within a list or between lists and have the corresponding observableArrays updated appropriately.

Basic Usage

<ul data-bind="sortable: items">
  <li data-bind="text: name"></li>
</ul>
<ul data-bind="sortable: { template: 'itemTmpl', data: items }"></ul>
<script id="itemTmpl" type="text/html"><li data-bind="text: name"></li></script>

Note: The sortable binding assumes that the child "templates" have a single container element. You cannot use containerless bindings (comment-based) bindings at the top-level of your template, as the jQuery draggable/sortable functionality needs an element to operate on.

Note2: (Update: 0.9.0 adds code to automatically strip leading/trailing whitespace) When using named templates, you will have the best results across browsers, if you ensure that there is only a single top-level node inside your template with no surrounding text nodes. Inside of the top-level nodes, you can freely use whitespace/text nodes. So, you will want:

<!-- good - no text nodes surrounding template root node -->
<script id="goodTmpl" type="text/html"><li data-bind="text: name">
    <span data-bind="text: name"></span>
</li></script>

<!-- bad -->
<script id="badTmpl" type="text/html">
<li>
  <span data-bind="text: name"></span>
</li>
</script>

Additional Options

Draggable binding

This library also includes a draggable binding that you can place on single items that can be moved into a sortable collection. When the item is dropped into a sortable, the plugin will attempt to call a clone function on the item to make a suitable copy of it, otherwise it will use the item directly. Additionally, the dragged callback can be used to provide a copy of the object, as described above.

<div data-bind="draggable: item">
  <span data-bind="text: name"></span>
</div>
<div data-bind="draggable: { template: 'itemTmpl', data: item }"></div>
<script id="itemTmpl" type="text/html"><span data-bind="text: name"></span></script>

Additional Options

Droppable binding

This library also includes a droppable binding that you can place on items which are targets for any draggable item. The binding can update an observable or a simple function on your viewmodel.

<div data-bind="droppable: dropTo">
  <span>Drop Items Here</span>
</div>

Additional options

<div data-bind="droppable: {data:dropTo, isEnabled:enableDrop, options:{greedy:true}}">
  <span>Drop Items Here</span>
</div

Dependencies

Touch Support - for touch support take a look at: http://touchpunch.furf.com/

Build: This project uses grunt for building/minifying.

Examples The examples directory contains samples that include a simple sortable list, connected lists, and a seating chart that takes advantage of many of the additional options.

Fiddles

License: MIT http://www.opensource.org/licenses/mit-license.php