Dragndrop preview film tiles

- import go jquery-ui
- Basic implementation without styling
- only swapping is possible (no insertion)

css/style.css

@@ -84,10 +84,18 @@
   background-color: lightgray;
 }
 
-#preview-list .preview-tile.selected {
+.preview-tile.selected {
   background-color: lightyellow;
 }
 
+.droppable-active {
+  background-color: pink;
+}
+
+.droppable-hover-active {
+ background-color: yellow;
+}
+
 .canvas-container {
   position: relative;
   display: block;

index.html

@@ -76,6 +76,7 @@
   
   <!-- Core libraries: -->
   <script src="js/lib/jquery-1.8.0.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
   <script src="js/lib/pubsub.js"></script> 
   
   <!-- Application wide configuration -->

js/controller/PreviewFilmController.js

@@ -21,12 +21,46 @@
     };
 
     ns.PreviewFilmController.prototype.createPreviews = function () {
-      this.container.innerHTML = "";
+      this.container.html("");
       for (var i = 0, l = this.framesheet.getFrameCount(); i < l ; i++) {
-        this.container.appendChild(this.createPreviewTile(i));
+        this.container.append(this.createPreviewTile(i));
       }
+      this.initTilesBehavior();
     };
 
+    ns.PreviewFilmController.prototype.initTilesBehavior = function () {
+    	var tiles = $(".preview-tile");
+    	tiles.draggable( {
+	      containment: '#preview-list',
+	      stack: '.preview-tile',
+	      cursor: 'move',
+	      revert: true
+	    });
+
+	    tiles.droppable( {
+	        accept: ".preview-tile",
+			activeClass: "droppable-active",
+			hoverClass: "droppable-hover-active",
+			drop: $.proxy(this.onDrop_, this)
+	    });
+    };
+
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
+		var frameId1 = parseInt($(event.srcElement).data("tile-number"), 10);
+		var frameId2 = parseInt($(event.target).data("tile-number"), 10);
+
+		this.framesheet.swapFrames(frameId1, frameId2);
+
+		// TODO(vincz): deprecate
+		piskel.setActiveFrameAndRedraw(frameId2);
+
+		// TODO(vincz): move localstorage request to the model layer?
+		$.publish(Events.LOCALSTORAGE_REQUEST);
+	};
+
     ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
     	var frame = this.framesheet.getFrameByIndex(tileNumber);
     	var width = frame.getWidth() * this.dpi,
@@ -34,6 +68,7 @@
 
 		var previewTileRoot = document.createElement("li");
 		var classname = "preview-tile";
+		previewTileRoot.setAttribute("data-tile-number", tileNumber);
 
 		if (piskel.getActiveFrameIndex() == tileNumber) {
 			classname += " selected";

js/model/FrameSheet.js

@@ -95,4 +95,19 @@
 		var frame = this.getFrameByIndex(index);
 		this.frames.splice(index + 1, 0, frame.clone());
 	};
+
+	ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
+		if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
+		   (!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
+		 	throw "Bad indexes for swapFrames Framesheet function.";
+		}
+		if(indexFrame1 == indexFrame2) {
+			return;
+		}
+		else {
+			var swapFrame = this.frames[indexFrame1];
+			this.frames[indexFrame1] = this.frames[indexFrame2];
+			this.frames[indexFrame2] = swapFrame;
+		}
+	};
 })();

js/piskel.js

@@ -73,7 +73,7 @@ $.namespace("pskl");
 
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
-        $('#preview-list')[0], 
+        $('#preview-list'), 
         previewTileCanvasDpi
       );