diff --git a/web/app/assets/javascripts/configureTracksHelper.js b/web/app/assets/javascripts/configureTracksHelper.js
index 2fe4260c0..32f220366 100644
--- a/web/app/assets/javascripts/configureTracksHelper.js
+++ b/web/app/assets/javascripts/configureTracksHelper.js
@@ -57,7 +57,7 @@
         var $offsetParent = $channel.offsetParent();
         var parentOffset = $offsetParent.offset();
 
-        var hoverChannel = $(context._.template($templateAssignablePort.html(), {id: 'bogus', name: $channel.text()}, { variable: 'data' }));
+        var hoverChannel = $(context._.template($templateAssignablePort.html(), {id: 'bogus', name: $channel.text(), direction: 'bogus'}, { variable: 'data' }));
         hoverChannel
           .css('position', 'absolute')
           .css('color', 'white')
@@ -180,7 +180,7 @@
           return;
         }
 
-        var $channel = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
+        var $channel = $(context._.template($templateAssignablePort.html(), $.extend({}, inputChannel, {direction:'in'}), { variable: 'data' }));
 
         $channel.hover(
           function() { hoverIn ($(this)) },
@@ -236,7 +236,7 @@
 
       var outputAssignment = 0;
       context._.each(outputChannels, function (outputChannel, index) {
-        var $channel = $(context._.template($templateAssignablePort.html(), outputChannel, { variable: 'data' }));
+        var $channel = $(context._.template($templateAssignablePort.html(), $.extend({}, outputChannel, {direction:'out'}), { variable: 'data' }));
 
         $channel.hover(
           function() { hoverIn ($(this)) },
@@ -476,6 +476,7 @@
     function initializeUnassignedOutputDroppable() {
       $unassignedOutputsHolder.droppable(
         {
+          accept: '.ftue-input[data-direction="out"]',
           activeClass: 'drag-in-progress',
           hoverClass: 'drag-hovering',
           drop: function( event, ui ) {
@@ -490,6 +491,7 @@
     function initializeUnassignedInputDroppable() {
       $unassignedInputsHolder.droppable(
         {
+          accept: '.ftue-input[data-direction="in"]',
           activeClass: 'drag-in-progress',
           hoverClass: 'drag-hovering',
           drop: function( event, ui ) {
@@ -507,6 +509,7 @@
         $outputChannelHolder.append($target);
         $target.find('.output-target').droppable(
           {
+            accept: '.ftue-input[data-direction="out"]',
             activeClass: 'drag-in-progress',
             hoverClass: 'drag-hovering',
             drop: function( event, ui ) {
@@ -529,6 +532,7 @@
         $tracksHolder.append($target);
         $target.find('.track-target').droppable(
           {
+            accept: '.ftue-input[data-direction="in"]',
             activeClass: 'drag-in-progress',
             hoverClass: 'drag-hovering',
             drop: function( event, ui ) {
diff --git a/web/app/views/clients/wizard/gear/_gear_wizard.html.haml b/web/app/views/clients/wizard/gear/_gear_wizard.html.haml
index d45f2b19b..36a987f2d 100644
--- a/web/app/views/clients/wizard/gear/_gear_wizard.html.haml
+++ b/web/app/views/clients/wizard/gear/_gear_wizard.html.haml
@@ -225,7 +225,7 @@
       = '{{data.name}}'
 
 %script{type: 'text/template', id: 'template-assignable-port'}
-  .ftue-input{'data-input-id' => '{{data.id}}'} {{data.name}}
+  .ftue-input{'data-input-id' => '{{data.id}}', 'data-direction' => '{{data.direction}}'} {{data.name}}
 
 %script{type: 'text/template', id: 'template-track-target'}
   .track{'data-num' => '{{data.num}}'}