Jquery draggable helper affected by css changes on original element

Question

I'm using JQuery UI to enable the drag and drop on some elements. My problem is that the helper of the drag and drop feature is affected by changes on the original dragged element.
For example if the original element get visibility: hidden/display:none during drag, the helper disappear too.
Same thing if i translate the original element, the helper get translated too. in my case i'm using helper: 'clone' or a function that create a brand new dom element for the helper.

I'm just trying to make a panel hide while i start dragging so that it does not cover other elements, but doing this the drag helper gets the problem.

Have any idea on how to solve this? thanks in advice

EDIT: i noticed that my real problem is that the style changes on the father of the dragged element are causing the issue:

example: https://codepen.io/Ciappone/pen/mdRKoXX

<div class="test">
  <i class="original fas fa-save"></i>
</div>

.dragging{
  transform: translateY(200px);
}

.test{
  transition: transform 1s linear;
}

$('document').ready(function(event){


$('.original').draggable({
    cursor: 'grab',
    helper:function(){
      let el = document.createElement('i');
      el.className ='fas fa-times';
      return el;
    },
    start: function(event){
      $('.test').toggleClass('dragging');
    },
    stop: function(event){
      $('.test').toggleClass('dragging');
    }
  })
});

In the example i'm dragging an icon and when i start the drag, i translate the father down for 200px, the drag helper do the same and i don't want this behavior, i just want it to stay attached do the pointer

Answer 1

Do the following to hide the diskette icon while dragging:

1. Modify the .dragging style to visibility:hidden
2. Add style that applies to the element created by helper. .test.dragging i.fa-times { visibility: visible; }

The final css looks like this

.dragging{
  visibility: hidden;
}
  
.test{
  transition: transform 1s linear;
}

.test.dragging i.fa-times {
  visibility: visible;
}