Display success and error colors

client/galaxy/scripts/mvc/ui/ui-select-content.js

@@ -269,13 +269,27 @@ var View = Backbone.View.extend({
     _handleDrop: function( ev ) {
         try {
             var drop_data = JSON.parse( ev.dataTransfer.getData( 'text' ) )[ 0 ];
-            var new_value = { values: [ { id  : drop_data.id,
-                                          src : drop_data.history_content_type == 'dataset' ? 'hda' : 'hdca' } ] };
-            this.model.set( 'value', new_value );
+            var new_id    = drop_data.id;
+            var new_src   = drop_data.history_content_type == 'dataset' ? 'hda' : 'hdca';
+            var new_value = { id : new_id, src : new_src };
+            if ( _.findWhere( this.model.get( 'data' )[ new_src ], new_value ) ) {
+                this.model.set( 'value', { values: [ new_value ] } );
+                this._handleDropResult( 'success' );
+            } else {
+                this._handleDropResult( 'danger' );
+            }
         } catch( e ) {
+            this._handleDropResult( 'danger' );
         }
     },
 
+    /** Highlight drag result */
+    _handleDropResult: function( status ) {
+        var self = this;
+        this.$el.addClass( 'ui-dragover-' + status );
+        setTimeout( function() { self.$el.removeClass( 'ui-dragover-' + status ) }, 1000 );
+    },
+
     /** Assists in identifying the batch mode */
     _batch: function( result ) {
         result[ 'batch' ] = false;

client/galaxy/style/less/ui.less

@@ -884,13 +884,26 @@
         padding-top: 2px;
     }
 }
+
 .ui-dragover {
     border-radius: 3px;
     border: 2px solid @table-border-color;
-    background: lighten(@table-border-color, 30%);
+    background: lighten(@table-border-color, 10%);
     padding: 2px;
 }
 
+.ui-dragover-danger {
+    &:extend(.ui-dragover);
+    border: 2px solid @state-danger-bg;
+    background: lighten(@state-danger-bg, 10%) !important;
+}
+
+.ui-dragover-success {
+    &:extend(.ui-dragover);
+    border: 2px solid @state-success-bg;
+    background: lighten(@state-success-bg, 10%) !important;
+}
+
 // global select2 adjustments
 .select2-container .select2-choice,
 .select2-container .select2-choices {