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

【问题标题】：Jquery draggable helper affected by css changes on original element受原始元素上的 css 更改影响的 Jquery 可拖动助手
【发布时间】：2021-07-11 09:46:12
【问题描述】：

我正在使用 JQuery UI 来启用对某些元素的拖放。我的问题是拖放功能的助手会受到原始拖动元素更改的影响。
例如，如果原始元素在拖动过程中获得可见性：hidden/display:none，则助手也会消失。
如果我翻译原始元素也是一样，助手也会被翻译。在我的情况下，我使用 helper: 'clone' 或 function 为帮助程序创建一个全新的 dom 元素。

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

对如何解决这个问题有任何想法吗？谢谢指教

编辑：我注意到我真正的问题是拖动元素的父亲的样式更改导致了问题：

示例：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 像素，拖动助手做同样的事情，我不希望这种行为，我只是希望它保持连接指针

【问题讨论】：

你有一些代码
您需要发布您的代码以供他人帮助。
@frogcoder 添加了代码和更多细节
拖动时是否要隐藏.test 或.original？
@frogcoder 我想隐藏/翻译.test 但我不希望拖动助手（“x”图标）做同样的事情，我希望它保持与指针的连接通常的拖放

标签： javascript jquery css jquery-ui drag-and-drop

【解决方案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;
}

【讨论】：