Jquery 受 css 原始元素更改影响的可拖动助手

Question

我正在使用 JQuery UI 在某些元素上启用拖放功能。我的问题是 拖放功能的助手受原始拖动元素的更改影响。
例如，如果原始元素在拖动过程中获得可见性：hidden/display:none，助手也会消失。
同样，如果我翻译原始元素，助手也会被翻译。在我的例子中，我使用 helper: 'clone' 或 function 为帮手.

我只是想在开始拖动时隐藏一个面板，这样它就不会覆盖其他元素，但是这样做会导致拖动助手出现问题。

知道如何解决这个问题吗？谢谢建议

编辑：我注意到我真正的问题是被拖动元素的父元素的样式变化导致了这个问题：

示例：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');
    }
  })
});

在这个例子中，我正在拖动一个图标，当我开始拖动时，我将父亲向下平移 200 像素，拖动助手做同样的事情，我不想要这种行为，我只希望它保持不变附做指针

Answer 1

执行以下操作以在拖动时隐藏软盘图标：

将.dragging样式修改为visibility:hidden
添加适用于 helper 创建的元素的样式。 .test.dragging i.fa-times { visibility: visible; }

最后的 css 看起来像这样

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

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

Jquery 受 css 原始元素更改影响的可拖动助手

Jquery draggable helper affected by css changes on original element

javascript

css

jquery

drag-and-drop

jquery-ui