front-end de alternancia de dispositivos alterados

static/js/compilacao_edit.js

@@ -266,17 +266,23 @@ function reloadFunctionClicks() {
     $('#editdi_texto').focus();
     $( ".bloco_alteracao" ).sortable({
       revert: true,
-        stop: function( event, ui ) {
+      stop: function( event, ui ) {
-            var pk = ui.item.attr('pk');
+          var pk = ui.item.attr('pk');
-            var pk_bloco = ui.item.closest('.bloco').closest('.dpt').attr('pk');
+          var pk_bloco = ui.item.closest('.bloco').closest('.dpt').attr('pk');
-            console.log(pk+ ' - '+ pk_bloco);
+          console.log(pk+ ' - '+ pk_bloco);
-        },
+      },
     });
 
     $( ".bloco_alteracao .dpt" ).draggable({
       connectToSortable: ".bloco_alteracao",
       revert: 'invalid',
       zIndex: 1,
+      drag: function( event, ui ) {
+          $( ".bloco_alteracao" ).css('border-width', '2px');
+      },
+      stop: function( event, ui ) {
+          $( ".bloco_alteracao" ).css('border-width', '0px');
+      },
     });
 
     $( ".bloco_alteracao" ).disableSelection();

static/styles/compilacao.scss

@@ -563,12 +563,13 @@ a:link:after, a:visited:after {
     .bloco_alteracao {
       margin: 1em 0;
       padding: 0em ;
-      background-color: #edf0f1;
+      background-color: transparent;
-      min-height: 36px;
+      min-height: 100px;
+      border: 0px dashed #d9ddde;
       .dpt {
         width: 100% !important;
         box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
-        padding: 0em 1em;
+        padding: 0.3em 1em;
         margin: 1px 0;
         background-color: #edf0f1;
         z-index: 1;