Marionette Sortable

A sortable Marionette.CollectionView powered by jQuery UI Sortable or HTML5 Sortable.

Demo

• CollectionView with jQuery UI Sortable
  • Source
• CollectionView with HTML5 Sortable
  • Source
• CompositeView with jQuery UI Sortable
  • Source

Requirements

• Marionette.js
• jQuery UI Sortable or HTML5 Sortable.

Usage

Load marionette-sortable.js and other dependencies.

<script src="marionette-sortable.js"></script>

Extend your CollectionView from Marionette.SortableCollectionView. Note that html5sortable: true is required when using HTML5 Sortable.

var YourCollectionView = Marionette.SortableCollectionView.extend({

  ...

  // Optional object to be passed to the $.sortable()'s argument.
  sortableOptions: {
    html5sortable: true // Required when using HTML5 Sortable.
  }

});

As a Behavior (mixin)

Marionette Sortable also provides Marionette.SortableBehavior. This enable you to make sortable any Marionette.CollectionViews without inheriting Marionette.SortableCollectionView. Note that html5sortable: true is required when using HTML5 Sortable.

var YourCollectionView = Marionette.CollectionView.extend({

  ...

  behaviors: {
    Sortable: {
      behaviorClass: Marionette.SortableBehavior,
      html5sortable: true // Required when using HTML5 Sortable.
    }
  }

});