Allow to sort collections using drag and drop

dahu/core/app/scripts/behaviors/workspace/actions/sortable.js

@@ -0,0 +1,51 @@
+/**
+ * Created by coutinju on 6/14/15.
+ */
+
+define([
+    'backbone.marionette'
+], function(
+    Marionette
+) {
+    /**
+     * Sortable behavior for composite views.
+     */
+    return Marionette.Behavior.extend({
+        /*
+         * When the view is empty this.view.$childViewContainer is undefined.
+         * We need to check if the behavior is defined because it might be
+         * the first childView to be added in the childViewContainer.
+         */
+        onChildviewDomRefresh: function() {
+            // Either childViewContainer is defined or not
+            var list = this.view.$childViewContainer || this.$el;
+
+            if(list.attr("sortable"))
+                return;
+
+            var collection = this.view.collection;
+
+            // Make the list sortable
+            list.sortable({
+                update: function(event, ui) {
+                    // Get an attached model
+                    var model = collection.get(ui.item.data('backbone-cid'));
+
+                    // On the quiet remove it from the collection
+                    collection.remove(model, {silent:true});
+
+                     //And sneakily add it to the necessary index
+                    collection.add(model, {at:ui.item.index(), silent:true});
+                }
+            });
+        },
+
+        onAddChild: function(view) {
+            /*
+             * We add as attribute the cid attribute of backbone to identify
+             * each view when the user drags and drops it.
+             */
+            view.$el.attr('data-backbone-cid', view.model.cid);
+        }
+    });
+});

dahu/core/app/scripts/views/filmstrip/screens.js

@@ -6,11 +6,17 @@ define([
     'handlebars',
     'backbone.marionette',
     // views
-    'views/filmstrip/screen'
+    'views/filmstrip/screen',
+    // behaviors
+    'behaviors/workspace/actions/sortable'
 ], function(
-    Handlebars, Marionette,
+    Handlebars,
+    Marionette,
     // views
-    FilmstripScreenView){
+    FilmstripScreenView,
+    // behaviors
+    SortableBehavior
+) {
 
     /**
      * Filmstrip screen view
@@ -27,6 +33,12 @@ define([
             this.collection = this.screencast.model.get('screens');
         },
 
+        behaviors: {
+            SortableBehavior: {
+                behaviorClass: SortableBehavior
+            }
+        },
+
         /**
          * Redefinition of methods to take into consideration the new parameter
          * item in getItemView, that we redefined in FilmStripScreenView.

dahu/core/app/scripts/views/workspace/actions.js

@@ -17,6 +17,8 @@ define([
     'views/workspace/actions/action',
     // templates
     'text!templates/views/workspace/actions.html',
+    // behaviors
+    'behaviors/workspace/actions/sortable',
     //modules
     'modules/utils/exceptions'
 ], function(
@@ -34,6 +36,8 @@ define([
     ActionView,
     // templates
     actionsTemplate,
+    // behaviors
+    SortableBehavior,
     //modules
     Exceptions
 ) {
@@ -64,6 +68,12 @@ define([
 
         },
 
+        behaviors: {
+            SortableBehavior: {
+                behaviorClass: SortableBehavior
+            }
+        },
+
         onAddChild: function(viewInstance) {
             this.scrollOnAction(viewInstance);
         },