Question

这是我的设置，我正在使用库interact.js和vuejs。

这是我的困境。

我的容器绝对位于底部。在那个容器中，我有另一个容器，它包含一个用overflow-y：scroll滚动的元素列表。

在.list容器中，我有.item divs，它包含可拖动的.icon元素。 .item有一个位置：relative。

因为我正在使用vue，所以不建议直接更改dom，所以在dragstart事件中我创建一个“clone”.icon，其绝对位置使用vue条件并将其拖动。

然而，由于我上面提到的设置，我不能因为裁剪而拖到.list容器之外。如果我删除.item div上的位置：relative，那么由于scrollTop，克隆的.icon将不会相应地运行。

这里发布的代码太多了，所以我在codepen上有一个工作示例。

body {
  margin: 0;
  font-family: "roboto", sans-serif;
}

header {
  width: 100%;
  height: 70px;
  background-color: #232323;
  position: relative;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
}

#main {
  position: relative;
  min-height: 100%;
  height: 100%;
  width: calc(100% - 50px);
}

#ctrl-menu {
  position: relative;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
  background-color: #1d1d1d;
  .ctrl {
    margin-top: 5px;
    border: 2px solid;
    padding: 5px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: #f1f1f1;
    position: relative;
    text-align: center;
    &:first-child {
      margin-top: 30px;
    }
    &:hover {
      color: #ff6961;
      .tooltip {
        display: block;
        color: #f1f1f1;
      }
    }
    .tooltip {
      display: none;
      background-color: rgba(22, 22, 22, 0.5);
      padding: 2px;
      position: absolute;
      top: 5px;
      width: 150px;
      left: 48px;
      font-size: 12px;
      border-radius: 4px;
      z-index: 1003;
    }
  }
}

#navbar {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  .logo {
    position: relative;
    z-index: 1000;
    margin-left: 8px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.bottom-menu {
  position: absolute;
  bottom: 0;
  background-color: #232323;
  width: 100%;
  height: 500px;
  z-index: 1001;
  #resizer {
    height: 17px;
    background-color: #1d1d1d;
    cursor: ns-resize;
    touch-action: none;
  }
}

.list {
  display: -webkit-flex;
  display: flex;
  background-color: #222;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow-y: scroll;
  .item {
    display: flex;
    align-items: center;
    width: 100%;
    // position: relative;
    border-bottom: 1px solid #1d1d1d;
    box-shadow: inset 0 1px 1px rgba(55, 55, 55, 0.5),
      0 1px 1px rgba(55, 55, 55, 0.5);
    min-height: 70px;
    .details {
      flex: 0 0 calc(100% - 180px);
      .name {
        color: #cdaf7c;
        -webkit-margin-before: unset;
        -webkit-margin-after: unset;
      }
      .desc {
        -webkit-margin-before: 0.5em;
        -webkit-margin-after: unset;
        width: 80%;
        font-size: 12px;
        color: #f1f1f1;
      }
    }
    .source {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      flex-basis: 100px;
      flex-direction: column;
      margin-right: 10px;
      .name {
        color: #cdaf7c;
        font-size: 14px;
      }
      .type {
        color: #f1f1f1;
        font-size: 12px;
      }
    }
  }
}

.icon {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;

  &.dragging {
    position: absolute;
    z-index: 1100;
    opacity: 0.5;
  }
  img {
    width: 60px;
    height: 60px;
  }
}

关闭.item上的位置相对关闭一切正常在scrollTop 0，但一旦我开始滚动问题开始发生。如果我转向位置：相对回.item元素，我不能将.clone“.icon”拖到.list容器之外。

任何建议或建议，以便我可以在.list（有溢出-y：滚动）之外拖动绝对div（由条件上的vuejs创建的.icon）。感谢。

将一个绝对div拖到位于另一个父容器内的相对父容器之外的overflow-y：scroll

0 个答案: