diff --git a/ui (gen4)/features/all.js b/ui (gen4)/features/all.js
index d687f7a2..5f243b01 100755
--- a/ui (gen4)/features/all.js	
+++ b/ui (gen4)/features/all.js	
@@ -37,6 +37,7 @@ require('features/ui-status')
 require('features/ui-ranges')
 require('features/ui-widgets')
 require('features/ui-slideshow')
+require('features/ui-drag-n-drop')
 require('features/external-editor')
 require('features/metadata')
 require('features/meta')
diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js
index 6ce972a9..a764ec62 100755
--- a/ui (gen4)/features/meta.js	
+++ b/ui (gen4)/features/meta.js	
@@ -108,6 +108,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'url-history',
 
 	'external-editor',
+	'ui-drag-n-drop',
 
 	'ui-preview-filters',
 
diff --git a/ui (gen4)/features/ui-drag-n-drop.js b/ui (gen4)/features/ui-drag-n-drop.js
new file mode 100755
index 00000000..1109af6c
--- /dev/null
+++ b/ui (gen4)/features/ui-drag-n-drop.js	
@@ -0,0 +1,105 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
+(function(require){ var module={} // make module AMD/node compatible...
+/*********************************************************************/
+
+var actions = require('lib/actions')
+var features = require('lib/features')
+
+var core = require('features/core')
+
+
+
+/*********************************************************************/
+
+var DragAndDrop = 
+module.DragAndDrop = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-drag-n-drop',
+	depends: [
+		'ui',
+	],
+
+	handlers: [
+		// XXX would be nice to load a directory tree as ribbons...
+		// XXX HACK-ish...
+		['start', function(){
+			var that = this
+			function handleDrop(evt){
+				event.stopPropagation()
+				event.preventDefault()
+
+				var files = event.dataTransfer.files
+				var lst = {}
+				var paths = []
+
+				// files is a FileList of File objects. List some properties.
+				var output = []
+				for (var i = 0, f; f = files[i]; i++) {
+					// only images...
+					if (!f.type.match('image.*')) {
+						continue
+					}
+
+					if(f.path){
+						paths.push(f.path)
+
+					} else {
+						// XXX get the metadata...
+						lst[f.name] = {}
+
+						var reader = new FileReader()
+
+						reader.onload = (function(f){
+							return function(e){
+								// update the data and reload...
+								var gid = lst[f.name].gid
+								that.images[gid].path = e.target.result
+								that.ribbons.updateImage(gid)
+							} })(f)
+
+						reader.readAsDataURL(f)
+					}
+				}
+
+				if(paths.length > 0){
+					that.loadURLs(paths)
+
+				} else {
+					that.loadURLs(Object.keys(lst))
+
+					// add the generated stuff to the list -- this will help us id the 
+					// images when they are loaded later...
+					that.images.forEach(function(gid, img){
+						lst[img.path].gid = gid
+						img.name = img.path
+					})
+				}
+			}
+			function handleDragOver(evt) {
+				evt.stopPropagation()
+				evt.preventDefault()
+				// Explicitly show this is a copy...
+				evt.dataTransfer.dropEffect = 'copy'
+			}
+
+			// handle drop events...
+			this.ribbons.viewer[0]
+				.addEventListener('dragover', handleDragOver, false);
+			this.ribbons.viewer[0]
+				.addEventListener('drop', handleDrop, false)
+		}]
+	],
+})
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                               */ return module })
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index 4db4582f..b6a74883 100755
--- a/ui (gen4)/ui.js	
+++ b/ui (gen4)/ui.js	
@@ -96,69 +96,6 @@ var viewer = require('imagegrid/viewer')
 /*********************************************************************/
 
 
-// XXX would be nice to load a directory tree as ribbons...
-// XXX get the real URLs from node/nw version...
-// XXX HACK-ish...
-function handleDrop(evt){
-	event.stopPropagation()
-	event.preventDefault()
-
-	var files = event.dataTransfer.files
-	var lst = {}
-	var paths = []
-
-	// files is a FileList of File objects. List some properties.
-	var output = []
-	for (var i = 0, f; f = files[i]; i++) {
-		// only images...
-		if (!f.type.match('image.*')) {
-			continue
-		}
-
-		if(f.path){
-			paths.push(f.path)
-
-		} else {
-			// XXX get the metadata...
-			lst[f.name] = {}
-
-			var reader = new FileReader()
-
-			reader.onload = (function(f){
-				return function(e){
-					// update the data and reload...
-					var gid = lst[f.name].gid
-					ig.images[gid].path = e.target.result
-					ig.ribbons.updateImage(gid)
-				} })(f)
-
-			reader.readAsDataURL(f)
-		}
-	}
-
-	if(paths.length > 0){
-		ig.loadURLs(paths)
-
-	} else {
-		ig.loadURLs(Object.keys(lst))
-
-		// add the generated stuff to the list -- this will help us id the 
-		// images when they are loaded later...
-		ig.images.forEach(function(gid, img){
-			lst[img.path].gid = gid
-			img.name = img.path
-		})
-	}
-}
-function handleDragOver(evt) {
-	evt.stopPropagation()
-	evt.preventDefault()
-	// Explicitly show this is a copy...
-	evt.dataTransfer.dropEffect = 'copy'
-}
-
-
-
 /*********************************************************************/
 
 $(function(){
@@ -277,13 +214,6 @@ $(function(){
 	}
 
 
-	// XXX drop files...
-	$('.viewer')[0]
-		.addEventListener('dragover', handleDragOver, false);
-	$('.viewer')[0]
-		.addEventListener('drop', handleDrop, false)
-
-
 	// setup the viewer...
 	ig
 		.load({ viewer: $('.viewer') })