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

Posted 2023-05-08

【中文标题】受原始元素上的 css 更改影响的 Jquery 可拖动助手

【英文标题】：Jquery draggable helper affected by css changes on original element

【发布时间】：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”图标）做同样的事情，我希望它保持与指针的连接通常的拖放

【参考方案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;