Question

我正在使用 draggable-dnd 库创建看板 React 应用程序。可拖动 div（或“任务”）是应用程序的一部分，我想添加“X”按钮以在单击时删除这些可拖动对象。当我将它们放置在 Draggable 的 div 中时，这些按钮会以它们的正确功能出现。但是我想用它们固定在右上角来正确地设计它们。所以我尝试添加 position:'fixed' 以及 top 和 right 位置。但是当这个 CSS 被实现时，按钮就会消失。更奇怪的是，当我拖动可拖动对象时，按钮会暂时出现，直到重新放下可拖动对象。我尝试将按钮的 z-index 更改为高数字，并将按钮重新包装在 div 中，但无济于事。

draggable 背后的通用代码：

<Draggable>
 <div>
   <RemoveDraggableButton/>
 </div>
</Draggable>

还有按钮：

class RemoveDraggableButton extends React.Component {
 ...

  render () {
    return (
        <button 
          onClick={this.handClick}
          style={{
                  position:'fixed',
                  top: 10,
                  right: 10,
                    }}>
          X
          </button>
    );
  };
}

GitHub

Answer 1

也许，您可以尝试提供每个 div，它是 position:relative 的 <tr class="text-center" id="job-{{ job.id }}" data-job-id="job-{{ job.id }}"> CSS 属性的父级，可拖动按钮的父级为 position: absolute。有了这个，按钮的位置将基于父元素而不是窗口对象

div 内按钮上的“位置：固定”隐藏按钮

1 个答案: