diff --git a/app/less/archetype.less b/app/less/archetype.less
index 7b597e6..3a24018 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -249,7 +249,7 @@
     .archetypeAddButton {
         color: #ddd;
         .icon {
-            vertical-align: text-top;
+            vertical-align: middle;
         }
         &:hover {
             color: #333;
@@ -355,9 +355,11 @@
 
     // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets.
     .archetypeSortable.archetypeEmpty {
-        min-height: 42px;
-        border: 1px dashed #dddddd;
-        margin-top: 5px;
+        &.archetypeCrossDraggable {
+            min-height: 42px;
+            border: 1px dashed #dddddd;
+            margin-top: 5px;
+        }
     }
 }
 
diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html
index 0d3d229..7e612f6 100644
--- a/app/views/archetype.default.html
+++ b/app/views/archetype.default.html
@@ -15,7 +15,7 @@
     <span class="help-inline" val-msg-for="archetypeMandatory" val-toggle-msg="required">Required</span>
 
     <!-- Fieldsets. -->
-    <ul ui-sortable="sortableOptions" class="archetypeSortable" ng-class="{archetypeEmpty: model.value.fieldsets.length === 0 || sortingLastItem()}" ng-model="model.value.fieldsets">
+    <ul ui-sortable="sortableOptions" class="archetypeSortable" ng-class="{archetypeEmpty: model.value.fieldsets.length === 0 || sortingLastItem(), archetypeCrossDraggable: model.config.enableCrossDragging}" ng-model="model.value.fieldsets">
         <li ng-repeat="fieldset in model.value.fieldsets">
             <fieldset ng-class="['archetype-fieldset-' + fieldset.alias, (getFieldsetValidity(fieldset) == false ? 'archetypeFieldsetError' : '')]" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
                 <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing}">