added drag sorting...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

grid-n-view.html

@@ -92,9 +92,10 @@ var restoreScroll = function(){
 	- crop stack (a-la ImageGrid.Viewer)
 	- actions:
 		- "from selection"
-- Gallery: drag-n-drop
+- <s>Gallery: drag-n-drop</s>
 	- <s>drop files/images</s> -- add loading indicator
-	- drag to sort
+	- <s>drag to sort</s>
+	- styling...
 - <s>Gallery: remove image</s>
 	- UI: mark images for deletion + delete marked
 - <s>Gallery: serialize / deserialize</s>

grid-n-view.js

@@ -752,14 +752,29 @@ var Gallery = {
 			.addEventListener('click', function(evt){
 				that.unmark_current
 					&& (that.current = null) })
-		// drag/drop...
-		// XXX add a local drag mode...
+		// drag/drop: sort...
+		// XXX should we support multi-drag???
+		var dragged
+		this.dom
+			.addEventListener('dragstart', function(evt){
+				var i = that.images.indexOf(evt.target)
+				if(i >= 0){
+					dragged = evt.target } })
+		this.dom
+			.addEventListener('dragenter', function(evt){
+				var i = that.images.indexOf(evt.target)
+				if(i >= 0){
+					var target = evt.target
+					evt.offsetX < evt.target.offsetWidth / 2 ?
+						target.after(dragged)
+						: target.before(dragged) } })
 		this.dom
 			.addEventListener('dragover', function(evt){
 				evt.preventDefault()
 				evt.stopPropagation()
-				evt.dataTransfer.dropEffect = 'copy'
-			}, false)
+				evt.dataTransfer.dropEffect = 'copy' }, false)
+		// drag/drop: files...
+		// XXX handle serilized data...
 		this.dom
 			.addEventListener('drop', function(evt){
 				evt.preventDefault()
@@ -776,16 +791,19 @@ var Gallery = {
 
 				Promise.all(files
 						.map(function(file){
-							if(!file.type.match('image.*')){
-								return [] }
-							if(file.path){
-								return file.path
-							} else {
-								return new Promise(function(resolve, reject){
-									var reader = new FileReader()
-									reader.onload = function(f){
-										resolve(f.target.result) }
-									reader.readAsDataURL(file) }) } })
+							// XXX handle serilized data...
+							// XXX
+
+							// images...
+							if(file.type.match('image.*')){
+								if(file.path){
+									return file.path
+								} else {
+									return new Promise(function(resolve, reject){
+										var reader = new FileReader()
+										reader.onload = function(f){
+											resolve(f.target.result) }
+										reader.readAsDataURL(file) }) } } })
 						.flat())
 					.then(
 						function(images){