How to add touch support to knockout-sortable?

Integrate jQuery UI Touch Punch, an external plugin, to enable touch events. After including it, knockout-sortable should handle drag-and-drop on touch devices similarly to mouse interactions.

Can I use knockout-sortable without jQuery UI?

No, knockout-sortable is tightly coupled with jQuery UI's sortable, draggable, and droppable widgets. It requires jQuery UI to function, as stated in the dependencies.

knockout-sortable vs HTML5 drag and drop for Knockout apps?

knockout-sortable offers a more integrated, declarative approach with automatic data binding, while HTML5 drag and drop is lighter but requires manual handling. For Knockout projects with jQuery UI, knockout-sortable simplifies development.

How to dynamically enable or disable drag-and-drop in knockout-sortable?

Use the isEnabled option, which can be an observable. When the observable's value changes, the sortable, draggable, or droppable widget automatically enables or disables, as detailed in the options.

What are common template mistakes in knockout-sortable?

Avoid containerless bindings and ensure templates have a single top-level element with no surrounding text nodes. For named templates, minimize whitespace around the root node to prevent cross-browser issues.

How to implement custom logic before an item move in knockout-sortable?

Use the beforeMove callback, which receives an object with move details and allows cancellation by setting arg.cancelDrop to true. This is useful for validation or conditional drops.

Sortable — Knockout.js & jQuery UI Binding

What is Sortable?

knockout-sortable is a binding library for Knockout.js that integrates jQuery UI's sortable, draggable, and droppable functionality with Knockout's observableArrays. It allows developers to create drag-and-drop interfaces where user interactions automatically update the underlying data model, eliminating the need for manual DOM manipulation and ensuring UI-data synchronization.

Target Audience

Frontend developers using Knockout.js who need to implement interactive drag-and-drop features like sortable lists, connected lists, or draggable items within their applications.

Value Proposition

Developers choose knockout-sortable because it provides a declarative, Knockout-native way to handle drag-and-drop interactions, leveraging jQuery UI's robust widgets while automatically syncing with observableArrays. Its extensive configuration options and support for templates make it flexible for complex use cases.

A Knockout.js binding to connect observableArrays with jQuery UI sortable functionality

Use Cases

Best For

Creating sortable lists with automatic array reordering in Knockout.js applications
Building connected drag-and-drop interfaces between multiple lists
Implementing draggable items that can be dropped into sortable collections
Developing interactive seating charts or similar configurable layouts
Adding touch-enabled drag-and-drop support with jQuery UI Touch Punch
Handling complex drag-and-drop logic with before/after move callbacks

Not Ideal For

Projects using modern frameworks like React or Vue that have built-in drag-and-drop solutions
Applications prioritizing minimal bundle size, as it requires the hefty jQuery and jQuery UI libraries
Teams needing complex or containerless template structures due to the single-container element restriction
Environments requiring server-side rendering or static generation, since it's purely client-side and depends on DOM manipulation

Pros & Cons

Pros

Automatic Data Sync

Drag-and-drop actions automatically update Knockout observableArrays, keeping UI and data in sync without manual DOM updates, as demonstrated in the basic usage examples.

Flexible Configuration

Offers extensive options like beforeMove and afterMove callbacks, and dynamic enabling with isEnabled, allowing fine-grained control over drag-and-drop behavior.

Comprehensive Bindings

Includes sortable, draggable, and droppable bindings, providing a complete suite for various interactive scenarios beyond simple sorting.

Template Support

Works with both anonymous and named Knockout templates, enhancing adaptability, though with the limitation of requiring a single container element.

Cons

Bulky Dependencies

Requires jQuery and jQuery UI, which are large legacy libraries, and touch support needs an additional plugin like Touch Punch, increasing bundle size and complexity.

Template Limitations

Templates must have a single top-level element and avoid surrounding text nodes, restricting markup flexibility and complicating certain designs, as warned in the README.

Legacy Technology Stack

Built on the older Knockout.js and jQuery UI, which may not align with modern frontend practices and could have reduced community support and compatibility.

Frequently Asked Questions

What is Sortable?

Target Audience

Frontend developers using Knockout.js who need to implement interactive drag-and-drop features like sortable lists, connected lists, or draggable items within their applications.

Value Proposition

Use Cases

Best For

Creating sortable lists with automatic array reordering in Knockout.js applications
Building connected drag-and-drop interfaces between multiple lists
Implementing draggable items that can be dropped into sortable collections
Developing interactive seating charts or similar configurable layouts
Adding touch-enabled drag-and-drop support with jQuery UI Touch Punch
Handling complex drag-and-drop logic with before/after move callbacks

Not Ideal For

Projects using modern frameworks like React or Vue that have built-in drag-and-drop solutions
Applications prioritizing minimal bundle size, as it requires the hefty jQuery and jQuery UI libraries
Teams needing complex or containerless template structures due to the single-container element restriction
Environments requiring server-side rendering or static generation, since it's purely client-side and depends on DOM manipulation

Pros & Cons

Pros

Automatic Data Sync

Drag-and-drop actions automatically update Knockout observableArrays, keeping UI and data in sync without manual DOM updates, as demonstrated in the basic usage examples.

Flexible Configuration

Offers extensive options like beforeMove and afterMove callbacks, and dynamic enabling with isEnabled, allowing fine-grained control over drag-and-drop behavior.

Comprehensive Bindings

Includes sortable, draggable, and droppable bindings, providing a complete suite for various interactive scenarios beyond simple sorting.

Template Support

Works with both anonymous and named Knockout templates, enhancing adaptability, though with the limitation of requiring a single container element.

Cons

Bulky Dependencies

Requires jQuery and jQuery UI, which are large legacy libraries, and touch support needs an additional plugin like Touch Punch, increasing bundle size and complexity.

Template Limitations

Templates must have a single top-level element and avoid surrounding text nodes, restricting markup flexibility and complicating certain designs, as warned in the README.

Legacy Technology Stack

Built on the older Knockout.js and jQuery UI, which may not align with modern frontend practices and could have reduced community support and compatibility.

Frequently Asked Questions

Sortable

What is Sortable?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Sortable

What is Sortable?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?